React Router v6でのRouteコンポーネントの扱い方の変更点

はじめに

React Router v6が2021年11月3日にリリースされたのですが、コンポーネントの名前やデフォルトが大きく変わりました。本記事では、よく使う構文についての変更点を紹介します。詳しくはhttps://remix.run/blog/react-router-v6を参照してください。

コード例

ルーティングをするための簡単なサンプルコードです。
/にアクセスするとHome、/pageにアクセスするとPage1がそれぞれ表示されます。/page2にアクセスすると/page1にリダイレクトされます。それ以外のURLはPage404が表示されます。

React Router v5

example-v5.js

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
} from "react-router-dom";
import Home from "home.js"
import Page1 from "page1.js"
import Page404 from "page404.js"

function App() {
    return (
        <Router>
            <div className="App">
                <Switch>
                    <Route exact path='/' component=Home/>
                    <Route exact path='/page1'>
                        <Page1 />
                    </Route>
                    <Route exact path='/page2'>
                        <Redirect to='/page1'/>
                    </Route>
                    <Route component=Page404/> {/*not foundの時*/}
                </Switch>
            </div>
        </Router>
    );
}

export default App;

React Router v6

example-v6.js

import React from "react";
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Navigate,
} from "react-router-dom";
import Home from "home.js"
import Page1 from "page1.js"
import Page404 from "page404.js"

function App() {
    return (
        <Router>
            <div className="App">
                <Routes>
                    <Route path='/' element={<Home/>} />
                    <Route path='/page1' element={<Page1/>} />
                    <Route path='/page2' element={<Navigate to='/page1' />} />
                    <Route path='/*' element={<Page404/>} /> {/*not foundの時*/}
                </Routes>
            </div>
        </Router>
    );
}

export default App;

変更点

• コンポーネントの名前が変更されました。

  • Switch → Routes
  • Redirect → Navigate
  • 間違えると次のようなメッセージが出ます。

Attempted import error: 'Switch' is not exported from 'react-router-dom'

* `<Route>`の中身は`element`で指定するのが必須になりました。`component`での指定はできません。また、`<Route> <Page1 /> </Route>`というように書くと次のようなエラーが出ます。

Error: [Page1] is not a component. All component children of must be a or

* exact句を書かなくても、ディレクションが一意に定まるようになりました。v5では、exactをつけない場合、"/"から始まるリンク先は"/"も"/page1"も全て"/"に遷移してしまっていた(前方一致)のですが、v6では**デフォルトで全文一致**で探してくれるようになりました。
* これに関連して、pathを指定しない場合の挙動も変わりました。v5ではpathを指定しないと全てのURLにマッチしているのと同じことになりましたが、v6では何にもマッチしません。**v6で全てのURLにマッチさせたい場合は`/*`をpathに指定します。**

# まとめ
React Router v6の変更点のうち、多くの人に影響しそうな部分をかいつまんで紹介しました。
まとめると、SwitchとRedirectの名前と、pathの検索方法が変わったということです。
詳しくは[https://remix.run/blog/react-router-v6](https://remix.run/blog/react-router-v6)や[Github](https://github.com/remix-run/react-router)を参照してください。