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
好文推荐