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 /> }
    ]
  }
];

React Router V6 完全停止使 URL 无效

React Router V6 full stop making URL invalid

javascript

reactjs

react-router

react-router-dom