【React】v5とv6のルーティングの書き方を比較してみた

v5とv6共通のファイル構成

src/
├── App.tsx
└── ProductDetail.tsx

v5版のサンプルコード

プロジェクト作成方法

# プロジェクト作成
npx create-react-app my-v5-app --template typescript

# react-router v5 インポート
npm install react-router-dom@5

# TypeScriptのインポート
npm install --save-dev @types/react-router-dom

App.tsx

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import ProductDetail from './ProductDetail';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/products/:id" component={ProductDetail} />
      </Switch>
    </Router>
  );
}

export default App;

ProductDetail.tsx

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams<{ id: string }>();

  return (
    <div>
      <h2>商品詳細ページ</h2>
      <p>商品ID: {id}</p>
    </div>
  );
}

export default ProductDetail;

v6版のサンプルコード

プロジェクト作成方法

# プロジェクト作成
npx create-react-app my-v6-app --template typescript

App.tsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import ProductDetail from './ProductDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products/:id" element={<ProductDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

ProductDetail.tsx

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams<{ id: string }>();

  return (
    <div>
      <h2>商品詳細ページ</h2>
      <p>商品ID: {id}</p>
    </div>
  );
}

export default ProductDetail;

v5とv6の違いまとめ

比較ポイント	v5	v6
ルーティングの親コンポーネント	<Switch>	<Routes>
コンポーネント指定方法	component={Home}	element={<Home />}
完全一致	exact が必要	完全一致がデフォルトなので exact は不要
propsの渡し方	component では propsが渡せない → render を使う必要がある	element={<Comp customProp="value" />} のように簡単に渡せる
入れ子ルート	少し複雑	シンプル
useHistory	あり	廃止 → useNavigate に置き換え
TypeScript型サポート	@types/react-router-dom が必要	v6では型が最初から入っているので追加不要
よくある間違い	exact を忘れる、<Route> が <Router> の外にある	element にコンポーネントをそのまま渡してしまう（例: element={Home}）

コードで見るシンプルな比較

v5	v6
<Route exact path="/" component={Home} />	<Route path="/" element={<Home />} />
<Switch>...</Switch>	<Routes>...</Routes>
<Route path="/about" render={(props) => <About {...props} />} />	<Route path="/about" element={<About customProp="ok" />} />