react路由基础介绍与使用

一，组件

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 跳转页面不留历史记录