安装

npm i react-router-dom -S

路由组件

BrowserRouter as Router 浏览器路由 别名 Router
所有的路由内容都应该放在Router里面
HashRouter as Router 哈希路由
NavLink 带active导航
to 导航的地址
to="/"
exact 必须精确匹配

如果被选中默认会有个active的class

Link 导航

to 切换的页面

Router 路由页面

path 对应的地址

component={} 对应的组件

exact 精确匹配

Switch 一次只显示一个路由
<Switch>
    <Route />
</Switch>
Redirect 路由跳转
from 从

to 跳转的地址

Prompt 退出提示
message 提示文字
WithRouter
让非路由组件具有 ``路由Props`

import {WithRouter} from 'react-router-dom'

class ToDo{}

export default WithRouter(ToDo)
包装

constructor(props){
    props
    match.history.location
}

路由的参数

<NavLink to="/produce/123">
<Route path="/produce:id" component={Produce}>
function Produce({match}){match.params.id}
路由组件的props
history
go
goBack() //返回
goForward //前进
push("/") //切换跳转
replace //跳转不留历史记录
location  //地址栏信息
pathname  //路径
match
params
路由参数

url //配置的地址