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('/')