react路由嵌套时，子路由无法显示

在子组件中实现路由嵌套时，控制台报错：<Routes> 您在 <Route path=“/”> 下呈现后代（或称为“useRoutes（）”），但父路由路径没有尾随“*”。这意味着，如果导航得更深，父路将不再匹配，因此子路由将永远不会呈现。请将父<Route path=“/”>更改为<Route path=“*”>。

报错原因：在router v6中，所有路由路径始终是完全匹配，不需要像router v4/5一样匹配路径前缀

解决方法：

1、如果路由配置在主组件（一般是<App/>）中，则为父路径指定*通配符

2、如果路由配置在子组件（<App/>下渲染的组件）中，将有关父组件的路由配置删除，只留下需要渲染的子组件的路由配置

react实现子路由嵌套，并渲染页面的方法：

第一步：在<App/>组件中配置相关路由（<App/>为该react项目渲染的主组件）

<Route path="/user" element={<User />}>
       <Route path="center" element={<Center />} />
       <Route path="many" element={<Many />} />
</Route>

第二步：添加点击跳转事件，key对应子页面路径

const items1 = [
  {
    label: "用户管理",
    key: "/user/center",
    children: [
      { label: "用户管理", key: '/user/center' },
      { label: "新增用户", key: '/user/many' },
    ],
  },
]

第三步：设置点击事件，使用useNavigate实现点击跳转

  const navigate = useNavigate();

  const handleMenuClick = (key) => {
    navigate(key);
  };
  <Menu
        items={items1}
        onClick={({ key }) => handleMenuClick(key)}
          />

第四步：在<User/>组件下配置子路由（<User/>组件为<App/>下渲染的子组件）

            <Routes>
                <Route path="center" element={<Center />} />
                <Route path="many" element={<Many />} />
            </Routes>