React Routerのチュートリアル Lesson9
前回の続き。
Lesson9 - Index Links
今回は、ナビゲーションリンクにHome
リンクを追加して、どの画面からでもホーム画面に戻れるようにします。
最初に思いつく方法
単純にapp/components/app.jsx
に、ホーム画面へのリンクを追加する方法です。
<li><NavLink to="/">Home</NavLink></li>
しかし、この方法には問題があります。
About
をクリックしてもRepos
をクリックしても、常にHome
がアクティブな状態になることです。
なぜなら、/
は全てのURLの親だからです。
IndexLink
を使う
この問題を解決するために、React Routerが提供するIndexLink
を使います。
IndexLink
は、IndexRoute
で設定されているURLへ遷移するためのリンクを生成してくれます。
先ほどの、ホーム画面へのNavLink
を削除して、以下を追加しましょう。
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
すると、期待通りに動作するかと思います。
Link
コンポーネントのonlyActiveOnIndex
プロパティを使う
もう一つの方法は、Link
コンポーネントのonlyActiveOnIndex
を使うことです。
すでに作成済みのNavLink
は、Link
コンポーネントのラッパーですが、スプレッド演算子でプロパティを展開しているので、以下のように書くことで実現することができます。
<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>