反応：<Route exact path =“ /” />と<Route path =“ /” />の違い

誰かが違いを説明できますか

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

そして

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

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

この例では、実際には何もありません。exactあなたは似た名前を持つ複数のパスを持っている場合paramが戦場に出ました。

たとえば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ルートが誤って再度返されます。

exactparamがルートの部分一致検索を無効にし、パスが現在のURLに完全に一致する場合、それは唯一のルートを返すことを確認します。

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

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

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

つまり、アプリのルーティングに複数のルートが定義されている場合、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を使用する場合exactは、/functionsルートに使用する必要があります。

こちらをご覧ください：https : //reacttraining.com/react-router/core/api/Route/exact-bool

完全一致：ブール値

trueの場合、パスが完全に一致する場合にのみ一致しlocation.pathnameます。

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

最短の答えは

ぜひお試しください。

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>