下面是我当前的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等路径时，它不会呈现任何内容。
实现子路径的正确方法是什么（不确定它的正确用词）？