一,组件
1.HashRouter 哈希路由
2.BrowserRouter 浏览器路由
3.Route 路由页面
path 第定义组件对应路径
component 对应路由对应组件
4.NavLink 链接
to 切换的页面
exact 是否精确匹配
5.Link 普通链接
to 切换的页面地址
6.Redirect 重定向
from 从
to 到
7.Switch 匹配一个
8.路由必须被 HashRouter 或者 BrowserRouter 包裹
二,配置
1.普通路由
<NavLink to="/about">
<Route path="/about" component={About}>
2.带参数路由
<NavLink to="/product/abc">
//
<Route path="/product/:id" component={Product}>
///
// 在组件中获取路由参数
{props.match.params.id}
3.子路由
<NavLink to="/admin">
<Route path="/admin" component={Admin}>
///
Admin组件中
<NavLink to="/admin/dashboard">
<NavLink to="/admin/orderlist">
<Route path="/admin/dashboard" component={DashBoard} >
<Route Path="/admin/orderlist" component={OrderList}
<Redirect from="/admin" to="/admin/dashboard"
4. 设置 404
<Route path="*" component={NoMatch}>
// 最好用Switch包裹(匹配唯一)
三,路由默认参数
1.匹配路由信息 (match)
params 路由参数
isExact 是否精确匹配
path 定义路径
url 对应的地址
2.地址栏信息 (location)
state状态
pathname 路径名称
search查询参数
hash 哈希值
3.历史记录 (history)
go 跳转历史记录
goBack 返回
goForward 前进
push跳转页面
replace 跳转页面不留历史记录