安装
npm i react-router-dom -S

导入路由需要的组件
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
【常用路由组件如下：】

BrowserRouter as Router
浏览器路由 别名为Router
Link导航 to切换的页面
Route路由页面--path对应链接component对应组件
BrowserLink
带active激活的class路由连接

子路由
步骤01：导入NavLink
import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'
步骤02：定义指令NavLink
<NavLink to="/detail">详情</NavLink>
步骤03：定义主路由
<Route path="/detail" component={Detail}></Route>
步骤04：编写主路由

child组件

image.png

life生命周期

image.png

Todolist

image.png

导出 child Todo

image.png

}
路由组件的参数
history
goBack() 返回
goForward() 前进
push('/') 切换跳转
replace 跳转不留历史记录

location 地址栏信息
pathname路径

match
params路由参数
url 配置的地址