React初学之路由管理

路由（即一个组件对应一个地址）本文利用嵌套路由

使用antd的ui库中的布局搭一个网站的样子

先上图：（我建立的布局模板为HomePage.js，在父类模板布局中嵌套其它的子页面，即点击左侧的菜单栏，在中间显示对应的子页面，父类模板布局不变。）

1、首先下载安装react-router-dom

2、在父类模板布局中使用

import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";

3、将父类组件包含在<Router></Router>标签中

const App =() => {
    return (
        <Router>
            <HomePage />
        </Router>
    )
}

4、将其它的子页面导入

import Home from './Home';
import ThrustChamber from './ThrustChamber';

5、在需要的按钮或面包屑加入<Link to="/Home"></Link>标签,link到自己想到的子页面即可。、

<Menu.Item key="sub1">
   <Link to="/Home" onClick={homeClick}>首页</Link>
</Menu.Item>

6、在需要放子页面的位置嵌入子组件即可，加上路径path="/Home"

<Content className={'container'}>
   <Routes>
      <Route path="/Home" Component={Home}/>
      <Route path="/ThrustChamber" Component={ThrustChamber}/>
   </Routes>
</Content>

注意：新版的react-router-dom中没有Switch了，改用Routes即可。