Posted at

React Routerで正規表現を使ってパスパラメータの形式を指定する

More than 1 year has passed since last update.


問題

React Routerのv4系で



  • /entires/:idでエントリ参照画面へ遷移させたい


    • ただし/entries/1のように:idには整数値だけ入れたい



というルーティングをやりたいとします。


解決法


正規表現を使う

Path-to-RegExpというライブラリと同じ方法で、正規表現を使って、:idにマッチする形式を指定することができます。

<BrowserRouter>

// ...
<Route path="/entries/:id(\d+)" component={Entry} />
// ...
</BrowserRouter>

/entries/:id(\d+)のように書くことで、パラメータ:idでマッチさせるルールを正規表現で指定しています。ここでは、数字1桁以上がマッチするようにしています。


参考