[Layout] is not a ＜Route＞ component. All component children of ＜Routes＞ must be a ＜Route＞ or ＜

问题描述： 在设置react路由时，有个非路由组件要和部分路由绑定显示，因此使用二级路由。但是v6版本Routers不支持嵌套非路由组件，因此报错！
代码：

const AppRouter = () => {
  return (
    <Router>
      <Routes>
        <Route path='/city' element={<City />}></Route>
        <Layout path='/'>
          <BottomNav></BottomNav>
          <Routes>
            <Route path='/' element={<Home />}></Route>
            <Route path='/life' element={<LifeService />}></Route>
            <Route path='/shop' element={<Shop />}></Route>
            <Route path='/user' element={<User />}></Route>
          </Routes>
        </Layout>
        {/* }> */}
      </Routes>
    </Router>
  )
}

解决方法： 将Layout封装成组件，通过来进行跳转，并配置path属性。
修改后代码：

const AppRouter = () => {
  return (
    <Router>
      <Routes>
        <Route path='/city' element={<City />}></Route>
        <Route path='/*' element={<Layout/>}></Route>
      </Routes>
    </Router>
  )
}

export default function Layout(props) {
    console.log(props.children, '1');
    return (
        <div>
            <BottomNav></BottomNav>
            <Routes>
                <Route path='/' element={<Home />}></Route>
                <Route path='/life' element={<LifeService />}></Route>
                <Route path='/shop' element={<Shop />}></Route>
                <Route path='/user' element={<User />}></Route>
            </Routes>
        </div>
    )
}

注意！！！： v6版本的path为严格匹配，因此如果path=‘/‘则无法访问内部的二级路由，应采用path=’/*’，*通配符进行路由设置。