react-routerでnamed parameterの対象を正規表現で絞る #React

ダイナミックなpathの対象範囲を狭めたい

react-routerで以下のようなルートを設定しようとしたところ、named parameterが既に存在していたために、そっちが引っかかってしまい、出したいルートが出せませんでした。

商品一覧: /products
商品登録: /products/create => これが表示されない。
商品詳細: /products/:productId

named parameterが全てを拾ってしまう

上記の例だと、:productIdがcreateも拾ってきてしまい、結果的に商品登録ページが表示できませんでした。

そもそもルートの設定が下手なのかもしれませんが、react-routerのpathはpath-to-regexpによる実装みたいなので、productIdの対象範囲を絞ることにしました。

環境

react: 17.0.1
react-router-dom: 5.2.0

実装

named parameter(この場合:productId)にregexを追加するには、parameterの後に（）で付け足すだけです。

参考：path-to-regexp

今回、productIdはuuid v4によって生成されたものだったので、それに対応したregexを記載しました。以下が参考例です。

<Route path="/products/:productId([0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12})">
  <ProductDetailPage />
</Route>

その他

実際には、上記だとpathが何なのかよく分からなくなるので、routes.tsにrouteの設定を全てまとめています。

これをAppコンポーネントでreact-routerのRouteにマップしています。

参考: Route Config

routes.ts

const regex = {
  uuid: '[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}',
};

export const routes = [
  // ...その他routes色々
  {
    path: '/products',
    exact: true,
    component: ProductListPage,
  },
  {
    path: '/products/create',
    exact: true,
    component: CreateProductPage,
  },
  {
    path: `/products/:productId(${regex.uuid})`,
    exact: true,
    component: ProductDetailPage,
  },
]