【React】react-router-domのバージョン別(v5,v6)の記述法を整理

はじめに

Reactのルーティングの学習を進めていく中で、学習教材の中ではreact-router-domのバージョン5を使用していましたがバージョン6で記述したいと思い、バージョン別の記述法を調べてまとめようと思います。

v5の書き方

App.jsx

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";

export const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
            <Top />
        </Route>
        <Route exact path="/users">
            <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

v6の書き方

Router.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";

export const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route>
          <Route path="/" element={<Top />}></Route>
        </Route>
        <Route>
          <Route path="/users" element={<Users />}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

変更箇所

• Switchが廃止され、代わりにRoutesを使用
• 完全一致がデフォルトになったため、exactが不要に
• 表示したいコンポーネントはelementを使って渡す

おわりに

比較することでどこがどのように違うのかを整理してインプットできました。
同じようにReactを始めて悩んでいる方や学習中の方の参考になれば幸いです。

参考

https://reactrouter.com/start/declarative/routing
https://reactrouter.com/6.28.0/upgrading/v5#upgrade-all-switch-elements-to-routes
https://qiita.com/ritsu21ctws/items/4baa57a78fd2de73da0b
https://zenn.dev/kazu1/articles/2c7883e6de22a9