typescript 如何使用React Router v6创建子路由器?

plicqrtu  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(194)

下面是我当前的React Router实现:

const router = createBrowserRouter([
    {
      path: "/",
      element: (
        <Page activeNav="home" >
          <Home />
        </Page>
      )
    },
    {
      path: "/about",
      element: (
        <Page activeNav="about" >
          <About />
        </Page>
      )
    },
    {
      path: "/blog",
      element: (
        <Page activeNav="blog">
          <Blog />
        </Page>
      )
    },
    {
      path: "/blog/:postName",
      element: (
        <Page activeNav="blog" >
          <Post />
        </Page>
      ),
      loader: ({ params }) => params.postName
    },
    {
      path: "/chess",
      element: <ChessRouter />
    }
  ])

最后一个路由/chess非常重要。我希望定义/chess/play/chess/login/chess/register等路由。我最初的想法是将另一个Router作为/chess路径的元素,然后所有这些路径都将从那里进行路由。但是,这会引发一个错误:

You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

我还尝试在/chess路径上使用children属性,但当我转到/chess/play等路径时,它不会呈现任何内容。
实现子路径的正确方法是什么(不确定它的正确用词)?

p8ekf7hl

p8ekf7hl1#

您不能在另一个路由器组件中呈现路由器组件是正确的,因为这是不变违规。每个React应用只需要一个路由器和路由上下文。
要在"/chess"上渲染子路由,则有两个选项:
1.呈现路由配置声明中的嵌套路由。这需要***ChessRouter组件来呈现Outlet组件,以便嵌套路由将其element内容呈现到该组件中。嵌套路由将能够使用新的RRDv6.4数据API。
第一个
1.使用尾随通配符(
"*")呈现根路由,该通配符允许后代路由也进行匹配。这允许ChessRouter组件呈现后代路由,即具有一组Route组件的Routes组件。后代路由
将无法***使用RRDv6.4数据API。
第一次

相关问题