React Router v5 と v6 におけるとの違い

2024-04-02

React Router v5 と v6 における <Route exact path="/" /> と <Route path="/" /> の違い

React Router v5

v5 では、exact プロパティを使用して、パスが完全一致した場合のみコンポーネントをレンダリングするかどうかを指定できます。

<Route exact path="/" /> は、URL が / の場合のみコンポーネントをレンダリングします。
<Route path="/" /> は、URL が / または / で始まる場合 (例: /about) にコンポーネントをレンダリングします。

つまり、exact を指定しない場合、ルートパスの子孫パスもすべてマッチしてしまうことに注意が必要です。

React Router v6

v6 では、exact プロパティは廃止されました。代わりに、末尾に * を付けることで、パスが末尾まで一致した場合のみコンポーネントをレンダリングできます。

v5 と同様に、* を使用することで、子孫パスもすべてマッチしてしまうことに注意が必要です。

例

以下の例では、2 つの異なるコンポーネント (Home と About) を使用して、ルートパスと /about パスを処理しています。

React Router v5

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

どちらのバージョンでも、Home コンポーネントは URL が / の場合のみレンダリングされ、About コンポーネントは URL が /about の場合のみレンダリングされます。

React Router v5 と v6 では、ルートパスの処理方法が少し異なります。

React Router v5

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));

このコードでは、以下の動作が期待できます。

URL が / の場合、Home コンポーネントがレンダリングされます。
URL が /other の場合、404 エラーが発生します。

React Router v6

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <Router>
    <div>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));

v5 と v6 のコードは非常に似ていますが、v6 では component プロパティが element プロパティに置き換えられています。

React Router v5 と v6 における <Route exact path="/" /> と <Route path="/" /> の違いは、exact プロパティの有無です。

ルートパス処理のその他の方法

<Switch> コンポーネント

React Router v5 では、Switch コンポーネントを使用して、最初に一致するルートのみをレンダリングすることができます。

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

このコードでは、URL が / の場合、Home コンポーネントのみがレンダリングされます。URL が /about の場合、About コンポーネントのみがレンダリングされます。

<Redirect> コンポーネント

React Router v5 と v6 では、Redirect コンポーネントを使用して、特定のパスにリダイレクトすることができます。

<Route path="/" render={() => <Redirect to="/about" />} />

このコードでは、URL が / の場合、常に /about パスにリダイレクトされます。

パスパラメータ

React Router v5 と v6 では、パスパラメータを使用して、URL の一部を動的にキャプチャすることができます。

<Route path="/user/:id" component={User} />

このコードでは、URL が /user/123 の場合、User コンポーネントがレンダリングされ、id プロパティには 123 が渡されます。

カスタムルート

React Router v5 と v6 では、独自のルートロジックを実装するためにカスタムルートを作成することができます。

const CustomRoute = ({ path, component }) => {
  // 独自のロジックを実装
  return <Route path={path} component={component} />;
};

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