01 路由安装
安装指令:npm i react-router-dom@5.0
02 路由组件
HashRouter 哈希路由 as Router
BrowserRouter 浏览器路由 as Router
Route 存放路由的页面
- path 路径
- componen t组件
- render 渲染
<Route path="/admin/dash" component={Dash}></Route>
NavLink 导航链接
- to 链接地址
- exact 精确匹配
- 匹配的链接会自动添加class active
<NavLink to='/login' exact ></NavLink>
Link 链接
- to 链接地址
- exact 精确匹配
Redirect 重定向
- to 重定向到...
- from 从...到...
<Redirect to={{ pathname: "/", state: { redirect: location.pathname } }}></Redirect>
Switch 一次只匹配一个路由
03 路由props
match
- path 路径
- url 地址
- isExact 精确匹配
- params 参数
history
-
go 跳转
-
goBack 返回
-
goForward 前进
-
push 跳转
-
replace 替换
-
listen 监听
// 如果没有指定redirect 跳转到admin页面
history.push(redirect);
location
- pathname 路径地址
- search 查询
- hash 哈希
- state 状态
NavLink to={{
pathname:"/details/abc",
search:"name=mumu&age=18",
hash:"good",
state:{reidrect:"/about"}
}}>详情abc</NavLink>
04 普通路由
<NavLink to=“/about”>
<Route path="/about" component={About}>
05 路由传参
props.match.params.id 获取参数
<NavLink to=“/details/abc”>
<Route path="/details/:id" component={Details}>
06 子路由
父路由Admin和普通是一样的
<NavLink to="/admin/dash">
<Route path="/admin/dash" component={Dash}>