2017-11-17

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

react-router v4の小ネタ。

やりたかったこと

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

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

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

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

実際の挙動

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

なんてこったい!

解決方法

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

1
2
3
4
5
6
7
<Route
path="/users/:id"
exact={true}
render={({ match }) => (
<Redirect to={`/users/${match.params.id}/info`} />
)}
/>

まとめ

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

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