hina2go

主に技術系のこことか。最近React始めました。

React Routerのチュートリアル Lesson9

前回の続き。

hinathy.hatenablog.com

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>

まとめ

ソースコード

github.com