ReactのRouterライブラリなどでパスの書き間違いから解放される方法

React の Router ライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。

• ライブラリを利用する

  • パスの書き間違いを防ぐことを目的としたライブラリは既にいくつかある。

• パスを生成する関数や変数をページ毎に記述する。

  • Page コンポーネントのプロパティとして生やす実装

    1
    export const UserPage = () => {}
    2
    UserPage.path = (id: string) => `/users/${id}`
    3
    
    4
    <Link href={UserPage.path(id)}>User</Link>
    

  • React Router にある generatePath のような関数を利用する

    1
    export const userPagePath = "/users/:id";
    2
    
    3
    generatePath(userPagePath, { id: "42" });
    

• Link コンポーネントなどのパスを利用する型を拡張する

  1. パスを定義したオブジェクトを定義している場合

     1
     // React RouterのuseRoutesなどを想定
     2
     const routes = [
     3
       { path: "/", element: <Dashboard /> },
     4
       { path: "team", element: <AboutPage /> },
     5
     ];
     6
     
     7
     // 実際はネストしたパスやパスパラメータを持ったパスがあるため、もっと複雑な型を書く必要がある
     8
     declare module "react-router-dom" {
     9
       export interface LinkProps extends ... {
     10
         href: typeof routes[number]["path"]
     11
       }
     12
     }
     

• パスを生成する関数や変数を解析して生成する

  • pathpidaなどはこれ

• TSServer を利用してパスを利用する型を拡張する

  • Next.js の typedRoutes は恐らくこれ

• 書き間違いを許容する

  • パスの追加や変更は開発初期を除いて滅多にあることではないため、（特にファイルを生成するためのコマンド実行が開発時に求められるような方法は）オーバーエンジニアリングであるという意見の人もいる。

• パスの遷移を確認するテストを書く

  • 網羅的に Link 毎のテストを書くのは不毛かもしれない
  • CI で走らせるようにすれば開発時にコマンドを実行させられるより健全