react-router-domで条件に一致したroutingだけ通す(exactとswitchの話)

React勉強メモ2

react-router-domに関して

react-router-domには沢山有るが今回はexactとswitchの話

例えばurlが以下のようにある場合、urlでマッチしたところで止めたい。

/user/newに行きたいのに、そのroutingを/users/:idに取られたくはない。

/users/:idのroutingに/usersが引っかからないようにするためにはexactを使用する

この場合はいいが、/users/newを追加しようとするとメッチャ困る
だって/users/:id/users/newに完全に一致してるんだもん!(:idにintを指定するとか出来るのかもしれないけど。)

さて、こういう場合にはSwitchを使用しよう。
Switchは条件に当てはまるroutingを見つけるとそれ以降を見に行かないのです、なので/users/edit/users/:idの前に書いてあげると問題なし!

/users/newにアクセスすると/users/newで止まり/users/:idまで通らない

なるほど便利!!!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク