React Router Dom v6でexactを使用する方法

Routeコンポーネントでのexactの使用: React Router Dom v6では、Routeコンポーネントにexactプロパティを追加することで、完全な一致を実現できます。例えば、以下のように使用します:

import { Route } from 'react-router-dom';
// ...
<Route exact path="/home" component={Home} />

上記の例では、'/home'パスにのみ完全に一致するルートが作成されます。他のパスとの部分一致は無視されます。

コンポーネントでのexactの使用: React Router Dom v6では、複数のルートをまとめて管理するためにコンポーネントを使用できます。exactプロパティをコンポーネントに追加することで、完全な一致を実現できます。以下に例を示します:

import { Routes, Route } from 'react-router-dom';
// ...
<Routes>
  <Route path="/" element={<Home />} />
  <Route exact path="/about" element={<About />} />
</Routes>

上記の例では、'/about'パスにのみ完全に一致するルートが作成されます。

重複するルートの回避: React Router Dom v6では、重複するルートを回避するために、コンポーネント内で*を使用することができます。これにより、特定のパスに完全に一致しない場合、指定したデフォルトのルートに遷移します。以下に例を示します:

import { Routes, Route } from 'react-router-dom';
// ...
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

上記の例では、'/about'パスに完全に一致しない場合、コンポーネントが表示されます。

以上がReact Router Dom v6でexactを使用する方法のいくつかです。これらの例を参考にして、ルーティングを正確に制御することができます。