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