React Router 5からReact Router 6への最短移行手順まとめ

Reactのルーティングライブラリとして事実上標準となっているReact Routerですが、バージョン5からバージョン6への移行で変更があり、下位互換性がなくなっています。この記事では、React Router5からReact Router6への、最短の移行手順を簡単にまとめました。手落ちがあれば、気付き次第修正します。

1. React Routerバージョン6をnpmからインストール

npm install react-router-dom@6

ターミナルから、バージョン6をインストールします。インストール後にビルドすると、バージョン5に対応したプロジェクトでは、当然ながら大量にエラーが出てきます。そこで、そのエラーを一つずつ解消していきます。

2. SwitchコンポーネントをRoutesコンポーネントで置き換え

Switchコンポーネントはバージョン6で廃止され、Routesコンポーネントが新たに導入されました。Routeコンポーネントは、必ずRoutesコンポーネントで囲むようにします。Switchコンポーネントが既に存在していれば、Routesコンポーネントにそのまま置き換えるのが手っ取り早いです。

以下の例では、わかりやすくするために最低限の骨組みだけを記述しています。

React Router 5

import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Component from './components/Component'

<BrowserRouter>
	<Switch>
		<Route exact path="/">
				<Component />
		</Route>
	</Switch>
</BrowserRouter>

React Router 6

import { BrowserRouter, Route, Routes } from 'react-router-dom' // Routesに変更
import Component from './components/Component'

<BrowserRouter>
	<Routes> // Routesに変更
		<Route exact path="/"> 
				<Component />
		</Route>
	</Routes>
</BrowserRouter>

3. Route配下にある子コンポーネントをelement属性による指定に変更（exact属性も削除）

Routeコンポーネント配下の子コンポーネントを、element属性に移動します。element属性の中身は、JSXで記述します。また、Routeコンポーネントにexact属性の記述があれば、必要ないので削除します

React Router 5

<Route exact path="/">
	<Component />
</Route>

React Router 6

<Route path="/" element={<Component />} />

4. RedirectコンポーネントをNavigateコンポーネントに変更

RedirectコンポーネントをNavigateコンポーネントにそのまま置き換えます。

React Router 5

import { Redirect } from 'react-router-dom'

<Redirect to="/" />

React Router 6

import { Navigate } from 'react-router-dom';

<Navigate to="/" />

5. useHistoryをuseNavigateに変更

useHistoryフックをuseNavigateフックに変更します。useNavigateフックでは、pushメソッドは必要ありません。

React Router 5

import { useHistory } from 'react-router-dom'

const history = useHistory()
history.push('/')

React Router 6

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()
navigate('/')