React Router v6 - 如何在路由中使用@符号？

敏捷开发

我正在使用 react-router-dom 来管理我的路线：

<Routes>
    <Route path="/" element={<MainLayout />}>
        <Route index element={<Home />} />
        <Route path="@:profileId" element={<Profile />} />
    </Route>
<Routes>

我想在配置文件路由中使用 @ 前缀，但错误是no routes matched location "/@username"

如何解决？

德鲁里斯

似乎有一个针对此问题的错误提交，并且正在处理 1 或 2 个打开的拉取请求。幸运（或不幸）这些类型的路径在非布局路径中运行良好。

解决错误/问题之前的解决方法：

将转换MainLayout为包装器组件并单独包装路由组件。基本上消耗一个children道具并渲染组件以前children的位置。Outlet

示例MainLayout布局组件：

const MainLayout = () => (
  <>
    <h1>MainLayout</h1>
    <Outlet />
  </>
);

变成

const MainLayout = ({ children }) => (
  <>
    <h1>MainLayout</h1>
    {children}
  </>
);

以及来自的路线

<Routes>
  <Route path="/" element={<MainLayout />}>
    <Route index element={<Home />} />
    <Route path="@:profileId" element={<Profile />} />
  </Route>
</Routes>

到

<Router>
  <Routes>
    <Route
      path="/"
      element={
        <MainLayout>
          <Home />
        </MainLayout>
      }
    />
    <Route
      path="/@:profileId"
      element={
        <MainLayout>
          <Profile />
        </MainLayout>
      }
    />
  </Routes>
</Router>