React Router v5→v6,v7での変更点#1 SwitchとRoutes

こんにちは。

学習していたReactの動画教材の中では、画面遷移を実装する方法としてReact Routerのv5が使われていました。
ですが、動画公開時からReact Routerのアップデートが行われた影響で、v5の記法そのままでは実装できない部分がありました。

そのため備忘録の意味も込めてReact Router v5からv6, v7で記法が変更になった部分をまとめてみようと思います。

今回はSwitchとRoutesです。

ページのルーティングを設定する方法

v5の場合

React Router v5では、ページのルーティングを設定する際にはSwitchが使われていました。

React Router v5

import { BrowserRouter, Link, Switch, Route, Routes } from 'react-router-dom';

import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

export default function App() {

  return (
    <BrowserRouter>
      <div className="App">
          <Link to='/'>Home</Link>
          <br />
          <Link to='/page1'>Page1</Link>
          <br />
          <Link to='/page2'>Page2</Link>
      </div>
      <Switch>
        <Route path='/page1'>
          <Page1 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

ですが、React Routerのv6,v7では上記の方法で記述しようとするとエラーが発生します。

Uncaught SyntaxError: 
The requested module '<foldername>' does not provide an export named 'Switch'

要約すると「Switchのモジュールは現在非対応です」と書いてありまs。

v6以降の場合

v6以降では<Switch>の代わりとして<Routes>を使うことが推奨されています。
実際に記述すると以下のようになりました。

React Router v6以降

import { BrowserRouter, Link, Routes, Route } from "react-router-dom";

import { Home } from "./Home";
import { Page1 } from "./Page1";
import { Page2 } from "./Page2";

function App() {
  return (
    <>
      <BrowserRouter>
        <div className="App">
          <Link to="">Home</Link>
          <br />
          <Link to="page1">Page1</Link>
          <br />
          <Link to="page2">Page2</Link>
        </div>
        <Routes>
          <Route path="" element={<Home />}></Route>
          <Route path="page1" element={<Page1 />}></Route>
          <Route path="page2" element={<Page2 />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

<Routes>を使ったルーティングにおいては<Route>の書き方にも変化が生じました。

従来の<Switch>を用いた場合の<Route>ではルーティング対象のコンポーネントは<Route>タグで囲むことで実装しました。

v5のRouteの実装方法

<Route path='/page1'>
  <Page1 />
</Route>

一方で、v6以降ではelement属性としてコンポーネントを登録する方法で実装します。

v6以降のRouteの実装方法

<Route path="page1" element={<Page1 />}></Route>

参考：v6以降で特定のパスの下層パスへのリンクを実装したい場合

次のようなサイト構造があったとします。

TOP
　- Page1
    　- detailA
    　- detailB
　- Page2 

このようにRouteで特定のパスの配下に実際に遷移するルーティングを実装したい場合、親フォルダと並列で子フォルダの<Route>を実装する必要があります。

<Route path="page1" element={<Page1 />}></Route>
<Route path="page1/detailA" element={<Page1DetailA />}></Route>
<Route path="page1/detailB" element={<Page1DetailB />}></Route>
<Route path="page2" element={<Page2 />}></Route>

※一部資料では<Route>を入れ子構造にすると親子関係を実装できるという文献もありましたが、この方法だと遷移は実現できませんでした。

参考

結論

慣れてしまえばそれほど難しくはない実感でした。
今後は<Route>を使うようにしましょう。

参考文献