React Router v6 のルーティング

React Router が v6 になっていたので、新しい記述方法に対応する。

まえがき

約二か月前の記事を書いたときには v5 だった React Router だが、本日新しいプロジェクトを作成してインストールしたら v6 になっていた。

下記の公式サイトに新しい書き方も従来のバージョンからの移行ガイドも記載されているのだが

https://reactrouter.com/docs/en/v6/getting-started/installation

ググると下記の v5 のドキュメントが出てきてしまって、

https://v5.reactrouter.com/web/guides/quick-start

しかもドキュメントの URL の構造ごと違うので v6 のドキュメントを探せず困ったので自分用のメモをしておく。

開発環境

react: 17.0.2
react-router-dom: 6.2.1

create-react-app を使ったプロジェクトを前提とする。

本文

従来（v5）の書き方

src/App.tsx に以下のように記述する。

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import Blog from './components/page/Blog';

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Blog} />
      </Switch>
    </Router>
  );
}

v6 の書き方

まず src/index.tsx に以下のように記述する。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';

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

次に src/App.tsx に以下のように記述する。

import React from "react";
import {
  Routes,
  Route
} from "react-router-dom";
import Blog from './components/page/Blog';

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Blog />} />
    </Routes>
  );
}

私が使っていた範囲での主な違い

<Switch> が消えて <Routes> になった
<Route exact> が消えた
- 移行ガイドを読んだところ基本的に従来の <Route exact> の動作になるようだ
- 従来の <Route> の動作をさせたい場合は <Route path="users/*" element={<Users />} /> というように path に * を入れる
<Route> の component というキーワードが消えて element になった

破壊的な変更になっているので、従来のプロジェクトから移行するときはちゃんと見てやらないといけなさそう。
ルーティングを司るファイルってそんなに多くはないと思うので大したことはないかもしれないが。

以上