React Router V6 完全停止使 URL 無效

Question

使用useRoutes和Outlet 。 我有以下路線示例：

const routes = [
  {
    path: "/",
    element: <Dashboard/>,
    children: [
      { path: "/*", element: <Profile /> },
      { path: "/*/example", element: <Example/> },
    ],
  }
]

const App= () => {
  const route = useRoutes(routes)
  return <div>{route}</div>
}

我想將 user_id 推送到 url 所以例如/user1這會按預期加載組件但是當我輸入/firstname.surname之類的內容時，我收到以下錯誤Cannot GET /firstname.surname但是/firstname.surname/example確實加載了零件

這是由於 Id 中的句號。 我該如何解決這個問題並將其作為有效的 URL 接受？

當我將儀表板的路徑更新為""時，它似乎可以工作，但是當我執行/foo.bar/test之類的操作時，它會加載配置文件組件，因為該路徑不存在，我該如何限制它？

Answer 1

const routes = [
  {
    path: "/",
    element: <Dashboard/>,
    children: [
      { path: "/:id", element: <Profile /> },
      { path: "/:id/example", element: <Example/> },
    ],
  }
]

const App= () => {
  const route = useRoutes(routes)
  return <div>{route}</div>
}

“*”是一個通用通配符，需要像上面一樣傳遞 id

Answer 2

我認為{ path: "/*/example", element: <Example/> }中的通配符不適用於也指定通配符的其他路由。 據我了解， "/*"僅在路徑末尾有效，表示匹配更深的嵌套路由。

但是，使用命名路徑參數，以下配置似乎可以工作。

const routes = [
  {
    path: "/",
    element: <Dashboard />,
    children: [
      { path: "/*", element: <Profile /> },
      { path: "/:path/example", element: <Example /> }
    ]
  }
];