[解決済み】React : <Route exact path="/" />と<Route path="/" />の違いについて。

質問

との違いを説明してください。

<Route exact path="/" component={Home} />

そして

<Route path="/" component={Home} />

の意味がわからない。 exact .

解決方法は？

この例では、特に何もありません。この例では exact パラメータは、似たような名前のパスが複数ある場合に使用されます。

例えば Users コンポーネントは、ユーザーのリストを表示します。また CreateUser コンポーネントは、ユーザーを作成するために使用されます。のurlは CreateUsers の下にネストされている必要があります。 Users . つまり、このような設定になります。

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

さて、ここで問題なのは http://app.com/users ルータは定義されたすべてのルートを調べ、最初に見つかったマッチを返します。つまりこの場合、ルータは Users というルートを最初に作り、それを返します。すべて順調です。

しかし、もし私たちが http://app.com/users/create の場合、再び定義されたすべてのルートを調べ、最初に見つかったマッチを返します。Reactルーターは部分マッチを行うので /users に部分的にマッチします。 /users/create を返すので、間違って Users のルートが再び登場します。

は、その exact パラメータはルートの部分マッチを無効にし、パスが現在の url と完全にマッチする場合にのみルートを返すようにします。

そこで、この場合は exact に、私たちの Users ルートにマッチするようにします。 /users :

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

ドキュメントによると exact を詳しく説明し、他の例も挙げています。