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

問題

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桁以上がマッチするようにしています。

参考

• React Router: Declarative Routing for React.js
• pillarjs/path-to-regexp: Express-style path to regexp