如何使用useRoutes与React Router Dom配置相对路由？

完全可以通过useRoutes实现你要的嵌套路由需求，不需要单独设置路径，你的示例代码只需做少量调整就能满足要求：

问题核心 #

你需要的是**父路由容器（Main）+ 子路由（Info）**的嵌套结构：

• /main 仅渲染 <Main />
• /main/acc/update 渲染 <Main /> + <Info />

修正后的配置代码 #

useRoutes([
  {
    path: '/',
    element: <Base />,
    children: [
      {
        path: '/',
        element: <SomeElement />,
      },
      {
        path: 'main',
        element: (
          <>
            <Main />
            <Outlet />
          </>
        ),
        children: [
          // 匹配 /main 路径，仅显示Main
          {
            path: '',
            element: null,
          },
          // 匹配 /main/acc/update 路径，显示Main + Info
          {
            path: 'acc/update',
            element: <Info />,
          },
        ],
      },
    ],
  },
])

关键调整说明 #

• 移除父路由path的通配符*：useRoutes的嵌套路由会自动处理子路径的拼接匹配，无需手动添加通配符。
• 新增path: ''的子路由：当访问/main时，Outlet会渲染这个空路径对应的null，从而只显示<Main />；如果需要在/main下显示默认内容，也可以替换成对应的组件。
• 子路由acc/update会自动拼接父路由的main路径，形成完整的/main/acc/update访问地址，完全符合你的需求。

内容的提问来源于stack exchange，提问作者DevOverflow