web-dev-qa-db-ja.com

React：<Route exact path = "/" />と<Route path = "/" />の違い

誰かが違いを説明できる

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

そして

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

「正確」の意味がわかりません

reactjsreact-routerreact-router-dom
72
batt

この例では、実際には何もありません。 exactパラメーターは、類似した名前のパスが複数ある場合に機能します：

たとえば、ユーザーのリストを表示するUsersコンポーネントがあるとします。ユーザーを作成するために使用されるCreateUserコンポーネントもあります。 CreateUsersのURLは、Usersの下にネストする必要があります。したがって、セットアップは次のようになります。

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

ここでの問題は、http://app.com/usersに移動すると、ルーターは定義済みのすべてのルートを通過し、見つかった最初の一致を返します。したがって、この場合、最初にUsersルートを見つけて、それを返します。すべて良い。

ただし、http://app.com/users/createに移動すると、定義されたすべてのルートを再び通過し、見つかった最初の一致を返します。 Reactルーターは部分一致を行うので、/usersは/users/createに部分的に一致するため、Usersルートを誤って返します。

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

したがって、この場合、exactをUsersルートに追加して、/usersでのみ一致するようにします。

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

ドキュメントはexactを詳細に説明し、他の例を示します。

131
Chase DeAnda

つまり、アプリのルーティングに複数のルートが定義されており、このようにSwitchコンポーネントで囲まれている場合、

<Switch>

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

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

次に、exactキーワードを、そのパスが別のルートのパスに含まれているルートに配置する必要があります。たとえば、ホームパス/はすべてのパスに含まれるため、/で始まる他のパスと区別するために、exactキーワードが必要です。理由も/functionsパスに似ています。 /functions-detailや/functions/open-doorを含む/functionsなどの別のルートパスを使用する場合は、/functionsルートにexactを使用する必要があります。

1
milkersarac