React Router 5の変更点

React Router v5がリリースされていたようなので、v4からの変更点を取り上げてみます。

現在、特に指定をしなければv5がインストールされます。

# Browser DOM
yarn add react-router-dom

# React Native
yarn add react-router-native

変更点の要点

v5は後方互換があるため、v4ユーザーは既存コードのまま利用できます。

注意するとすれば、コアパッケージからの分割代入が推奨される点。

// この記述方式を使っている場合は
import Router from 'react-router/Router';
import Switch from 'react-router/Switch';

// こうする必要がある
import { Router, Switch } from 'react-router';

前者も現状は使えますが、以下のような警告が表示されます。

Warning: Please use `require("react-router-dom").
Switch` instead of `require("react-router-dom/Switch")`.
Support for the latter will be removed in the next major release.

新機能

<Route path>で配列が使用できるようになった。2つ以上の異なるルートパスで同じコンポーネントをレンダリングしたい場合は、1箇所にまとめて記述できます。

例えば、/と/homeをHomeというコンポーネントでレンダリングする場合、今までは以下のように記述していました。

<Switch>
  <Route exact path="/home" component={Home} />
  <Route exact path="/">
    <Redirect to="/home" />
  </Route>
</Switch>

今後は以下のように記述できます。

<Switch>
  <Route exact path={["/home", "/"]} component={Home} />
</Switch>

上記はリダイレクトのため本来は変更前の表記が好ましいかもしれませんが、こういう書き方もあるよ程度で覚えておくといいかもしれません。

おわりに

v4.3を使用しているユーザーは、従来のコードを維持したままv5にアップデートできます。実のところ、v4.4.0 betaが依存関係の問題でv5.0.0として繰り上がりリリースされたようです。