40
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React Routerのexactとは何か

Last updated at Posted at 2020-05-09

追記@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値で、デフォルトはfalseexact記述無し)で部分一致でコンポーネントを返します。

公式ドキュメントには下記の例で示されています。

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に部分一致してしまうからなのですね。

参照

reactjs - React : difference between <Route exact path="/" /> and <Route path="/" /> - Stack Overflow

40
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?