Navigasi serbuk roti dan penghalaan padanan separa untuk React-router v6

Question

Saya menggunakan react-router-dom v6.8.1 (versi terkini setakat ini), sebelum ini menggunakan pustaka pihak ke-3 yang dipanggil use-react-router-breadcrumbs untuk menyediakan serbuk roti, tetapi menurut dokumentasinya, mereka kini mengesyorkan Gunakan "cara penghala tindak balas terbina dalam", dokumentasi ada di sini. Ia berdasarkan melampirkan serbuk roti pada setiap objek pemegang laluan dan menggunakan cangkuk useMatches untuk mendapatkannya.

Jadi saya menulis semula kod itu, tetapi ia mempunyai kecacatan yang agak besar yang tidak dapat saya perbaiki. Katakan saya mempunyai 3 laluan, 2 dan 3 bersarang di bawah 1:

{
    path: '/',
    element: <Layout />,
    handle: {
      crumb: () => 'Home',
    },
    children: [
      {
        path: '/users',
        element: <UserList />,
        handle: {
          crumb: () => 'Users',
        },
      },
      {
        path: '/users/:id',
        element: <UserDetails />,
        handle: {
          crumb: () => <DynamicUserNameCrumb />,
        },
      },
   ]
}

Menggunakan perpustakaan tersuai, anda boleh pergi ke /users/:id dan dapatkan serbuk roti untuk setiap laluan, menjadikan keseluruhan navigasi serbuk roti kelihatan seperti ini:

"Rumah -> Pengguna -> John Doe"

Namun, apabila menggunakan kaedah terbina dalam baharu dan cangkuk useMatches(), saya hanya boleh memadankan laluan 1 dan 3. Laluan 2 (/pengguna) tidak dianggap padanan dan saya tidak boleh mengakses serbuk roti untuk laluan itu. Hasilnya adalah ini, yang bukan yang saya mahukan:

"Rumah -> John Doe"

Jadi soalan saya ialah: Bagaimana anda harus menangani situasi ini? Fikiran pertama saya adalah untuk menyarangkan laluan 3 di bawah 2 supaya serbuk roti akan dipaparkan dengan betul, tetapi pada hakikatnya ia akan dipaparkan sebagai komponen yang ditakrifkan oleh laluan 2 (senarai pengguna) manakala saya hanya mahu memberikan laluan 1 (susun atur) dan 3 ( halaman butiran pengguna).

Saya menjangkakan useMatches() menerima konfigurasi untuk mengembalikan padanan separa, tetapi nampaknya cangkuk ini tidak menerima sebarang input.

Saya akan berpatah balik dan kembali ke perpustakaan pihak ketiga, tetapi ingin bertanya di sini sebelum berbuat demikian, kerana mereka dengan jelas mengesyorkan menggunakan penyelesaian asli berdasarkan useMatches dan mengendalikan objek. Saya rasa jika ini adalah cara yang disyorkan secara rasmi untuk mengendalikan serbuk roti penghala tindak balas, mesti ada penyelesaiannya.

Answer 1

Apa yang saya faham, ini kerana pelbagai segmen "/users"和"/users/:id"是兄弟路由。重构路由配置，使"/users/:id"成为"/users"的子路由，这样就有了一个“逻辑路径”，从"/"到"users"到":id".

Contoh:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    handle: {
      crumb: () => "Home"
    },
    children: [
      {
        path: "/users",
        handle: {
          crumb: () => "Users"
        },
        children: [
          {
            index: true,
            element: <UserList />
          },
          {
            path: "/users/:id",
            element: <UserDetails />,
            handle: {
              crumb: () => <DynamicUserNameCrumb />
            }
          }
        ]
      }
    ]
  }
]);