react-router-dom v6路由嵌套2

1：在根目录下新建Router.js文件

import Layout from './views/layout'
import Home from './views/home'
import { Component } from 'react'
import { Route, BrowserRouter, Routes } from 'react-router-dom'
class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
            <Route path="/*" element={<Layout/>} >
                    <Route path="/home" element={<Home />}></Route>
                  </Route>
        </Routes>
      </BrowserRouter>
    )
  }
}
export default Router

2：loyout组件(父组件)

import Header from '../../common/header'
import { Outlet  } from 'react-router-dom'
const Layout = () => {
  return (
    <div>
        // header组件根据需要自己创建
        <Header></Header>
        // 使用Outlet来显示匹配到的子组件
        <Outlet />
    </div>            
  )
}
export default Layout;

具体说明，传送门 https://www.zxlmx.com/zhaji/qianduan/react/136.html