React Routerのv5とv6の違い

React Routerとは？

Reactアプリケーションのルーティングを管理することができるライブラリ。
バージョン6でいくつか記法に変更があった。

SwitchとRouters

書き方の違い

• v5
  • Switchでルーティングを囲う
  • componentプロパティにコンポーネントを渡す
• v6
  • Routesでルーティングを囲う
  • elementプロパティにJSXを直接渡す

v5

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

function App() {
  return (
    <Switch>
      <Route path="/A" component={A} />
      <Route path="/B" component={B} />
      <Route path="/" component={C} />
    </Switch>
  );
}

v6

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

function App() {
  return (
    <Routes>
      <Route path="/A" element={<A />} />
      <Route path="/B" element={<B />} />
      <Route path="/" element={<C />} />
    </Routes>
  );
}

機能の違い

• v5
  • Switchは上から下にルートをチェックし、最初に一致するルートを見つけたらそれ以降のルートを無視してそのルートのみをレンダリングする
  • v5ではルートが完全に一致するかどうかを指定するためにexactプロパティが必要
• v6
  • Routesも同様に最初に一致するルートを探すが、v6ではネストされたルートがより強力にサポートされている
  • v6ではデフォルトで完全一致をチェックする

ネストされたルートの違い

• v5
  • ネストを表現する場合、親ルートのコンポーネント内で子ルートを定義する
• v6
  • 親Routeコンポーネント内に子Routeコンポーネントをネストする形で定義する
  • 親のコンポーネント内の子要素をレンダリングしたい場所にOutletコンポーネントを使用する

v5

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

function App() {
 return (
   <Switch>
     <Route path="/A" component={A} />
     <Route path="/B" component={B} />
     <Route path="/" component={C} />
   </Switch>
 );
}

function B() {
 return (
   <div>
     <h2>Users</h2>
     <Switch>
       <Route path="/B/D" component={D} />
       <Route path="/B/:id" component={E} />
     </Switch>
   </div>
 );
}

v6

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

function App() {
 return (
   <Routes>
     <Route path="/" element={<A />} />
       <Route path="B" element={<B />}>
       <Route path="C" element={<C />} />
         <Route path=":id" element={<D />} />
       </Route>
     <Route path="E" element={<E />} />
   </Routes>
 );
}

function A() {
 return (
   <div>
     <Outlet />
   </div>
 );
}

親コンポーネント内でさらに子コンポーネントを出し分けたい際にネスト記法を使うこと。
urlが階層構造になってるからといって何でもかんでもネスト記法でルートを記述すれば良いものではない

component/render/children

v5で使われていたこれらのプロパティは廃止され、elementに統合された。

ルーティングパラメータの取得

• v5
  • match/location/historyをpropsとして受け渡ししてパラメータを取得
• v6
  • フックを用いてpropsの受け渡しなしに実現(useParams/useLocation/useNavigate)