本記事を書いた経緯
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
と部分一致してしまうからです.