追記@2021/11
2021年11月にリリースされたReact Router v6では、
デフォルトが完全一致になったため、exact
の記述は不要になりました。
<Route exact>
is gone. Instead, routes with descendant routes (defined in other components) use a trailing*
in their path to indicate they match deeply
<Route exact>
はなくなりました。代わりに、(他のコンポーネントで定義されている)子孫ルートを持つルートは、パスに末尾の*
を使用して、それらが深く一致していることを示します。
v6のドキュメントより引用
React Router | Upgrading from v5
以下、exact
の説明はv4 or v5対象の説明になりますので、
ご注意ください。
React Router v5までのexact
について
<Route exact path="/" component={Home} />
React Routerの<Route />
にexact
を記述すると、path
に指定したパス文字列と、location.pathName
(windowオブジェクトのlocation.pathName)が完全一致した場合のみコンポーネントを返すようになります。
exact
はbool値で、デフォルトはfalse
(exact
記述無し)で部分一致でコンポーネントを返します。
公式ドキュメントには下記の例で示されています。
path | location.pathname | exact | matches? |
---|---|---|---|
/one | /one/two | true | no |
/one | /one/two | false | yes |
React Router: Declarative Routing for React.js
上記の通り、exact
を指定しない場合、path
を/one
に指定していても、
部分一致によりlocation.pathnameが/one/two
にマッチしてしまうとのことです。
Homeコンポーネントのようなindexページを表示する<Route />
でexact
が指定されているのは、
指定しないと全てのpath
に部分一致してしまうからなのですね。