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

Question

我正在使用 react-router-dom 来管理我的路由:

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

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

如何解决？

Answer 1

似乎有一个bug提交了这个问题，并且正在处理 1 或 2 个开放的拉取请求。幸运的是(或不幸的是)这些类型的路径在非布局路由中工作良好。

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

将 MainLayout 转换为包装器组件并单独包装路由组件。基本上使用 children Prop 并在 Outlet 组件之前呈现 children。

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>