本記事を書いた経緯
Webアプリを開発するにあたって,ルーティングのためにreact-router-domを利用しました.
その中でも,プロパティのうちの一つであるexactがどのような役割なのか曖昧なまま利用していたのでこちらにまとめます.(Homeのpathに指定するものだと思い込んでいた...)
exactとは?
React Routerの<Route />内にexact(bool)を記述すると指定したpathとlocation.pathnameが「完全一致」した場合のみコンポーネントを返します.
例
ドキュメントの例をお借りすると,
| path | location.pathname | exact | maches? |
|---|---|---|---|
| /one | one/two | true | no |
| /one | one/two | false | yes |
のようになります.
上の例では,exact=trueのため,完全一致でなければならずmachしません.
一方,下の例では,exact=falseのため,部分一致するone/twoとmachします.
Homeでexactを指定する理由
私は,Homeで表示されるページにexactを指定すると勘違いしていましたが,上記のことを踏まえるとあながち間違えではないことが分かります.
つまり,
<Route exact path="/" component={Home} />
のようにexactを指定してあげないと.すべてのlocation.pathについてHomeのpathと部分一致してしまうからです.