react router v4のRedirectでURLパラメータを使う

react-router v4の小ネタ。

やりたかったこと

昔は<IndexRoute />があったんだけどね。。。

例えば、/users/1という URL にアクセスがきた時に/users/1/infoのページを表示させたい場合。

<Redirect />の中にこんな感じで書くと動くと思ったんですが。。。

<Redirect from="/users/:id" to="/users/:id/info" />

実際の挙動

実際にリダイレクトされた URL は/users/:id/infoでした。

なんてこったい！

解決方法

一度<Route />で囲ってからrenderを使ってリダイレクトします。 こんな感じでできました。が、正直めんどくさい。

<Route
  path="/users/:id"
  exact={true}
  render={({ match }) => (
    <Redirect to={`/users/${match.params.id}/info`} />
  )}
/>

まとめ

前のプロジェクトでは v2 系を使っていたのですが、v4 は結構変わってて割と大変ですね。（白目

同じようなこと考えて PR 送ってくれている人いるんですが、こりゃマージされないな。。。

• https://github.com/ReactTraining/react-router/pull/5368