react router v4のRedirectでURLパラメータを使う
2017-11-17

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送ってくれている人いるんですが、こりゃマージされないな。。。