# React Route嵌套路由

React Route通过标签实现嵌套路由

1. 根路径必须包含子路径

//App.jsx写法
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
      <Routes>
          <Route path="/" element={<App/>}>
              <Route path="/home" element={<Home/>}></Route>
              <Route path="/about" element={<About/>}></Route>
              <Route path="/write" element={<Write/>}></Route>
          </Route>
      </Routes>
  </BrowserRouter>
​
)
​

2. 以Oulet标签为标识符，分割页面

//main.jsx写法
import {Layout, Menu} from "antd";
import MyButton from "./button.jsx";
import {Link, Outlet} from "react-router-dom";
const {Header,Content,Footer,Sider}=Layout
function Index(){
    return <>
        <Layout>
            <Layout>
                <Header style={{ display: 'flex', alignItems: 'center',}}>
                    <div className="demo-logo" />
                    <Menu mode="horizontal">
                        <Menu.Item ><Link to="/home">首页</Link></Menu.Item>
                        <Menu.Item ><Link to="/write">写作</Link></Menu.Item>
                        <Menu.Item ><Link to="/about">关于</Link></Menu.Item>
                    </Menu>
                </Header>
            </Layout>
            <Content>
                <Layout style={{ padding: '24px 0' }} >
                    <Sider width={200}>
                        <Menu style={{ height: '100%' }}>
                            <Menu.Item >Python</Menu.Item>
                            <Menu.Item >JavaScript</Menu.Item>
                        </Menu>
                    </Sider>
                    {/*从哪里分割占位符就写在哪里*/}
                    <Outlet/>
                </Layout>
            </Content>
            <Footer style={{ textAlign: 'center' }}>MyNote ©2023 Created by Wedongliu</Footer>
        </Layout>
    </>
}
export default Index