React路由

• 安装
• 导入
• 组件
• 路由配置
• 路由参数
• • • match 匹配的路由
    • history 历史记录
    • location 地址栏信息

---

安装

npm i react-router-dom@5.0 -S

导入

// 导入路由相关组件
// 导入哈希路由 别名Router
// Route 路由页面
// NavLink 导航链接
// Redirect 重定向
// NavLink与Link区别：NavLink自动添加一个active的class
import { HashRouter as Router, Route, NavLink, Redirect, Switch, Prompt, Link } from 'react-router-dom'

---

组件

1. BrowserRouter 浏览器路由
   HashRouter 哈希路由
2. Route 路由容器

   exact 精确匹配
   path 路由地址
   component 组件

<Route path='/' exact component={Home}></Route>

3. NavLink 导航链接

   exact 精确匹配
   （pathname和配置的path完全匹配）
   to 链接地址
   class=“active”
   匹配状态

<NavLink to='/' exact>首页</NavLink>

4. <Link> 跳转

to="/login"
to={{
pathname:"/login",
search:“name=mumu&age=18”,
hash:"#good,
state:{redirect:"xxx"}
}}
参数与props里面的location一致

5. <Redirect> 重定向

   to 去哪儿
   from 从哪儿

6. <Switch> 匹配一个路由

7. <Prompt> 路由离开时调用弹窗

   when 当条件为真
   message 弹出的文本内容

8. 404

   1.Switch包裹（一次匹配一个）
   2.path="*"
   3.配置放在最后面

9. 子路由

	//在主路由添加
<div>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    <Redirect path='/admin' to='/admin/dash'></Redirect>{/* 重定向 */}
</div>

路由配置

function App(){
  return(
    <Router>
      <div>
      	 <NavLink to='/' exact>首页</NavLink>|
		 <NavLink to='/about'>关于我们</NavLink>|
      </div>
	  <Switch>
		 <Route path='/' exact component={Home}></Route>
        <Route path='/about' component={About}></Route>
	  </Switch>
    </Router>
  )
}
export default App;

1.所有路由相关内容都应放入<Router>组件内
2.链接使用：<NavLink to=“地址”>
3.页面使用：<Router path=“地址” component={组件}>

路由参数

只有Route对应的component才有这三个自动注入的参数

match 匹配的路由

params 路由的参数
isExact 是否精确匹配
path 路径
url 地址

history 历史记录

push 跳转
replace 替换历史记录
go 跳转历史记录
goBack 返回
goForward 前进
listen 监听历史记录的变化
location 同location
length 历史记录的长度

location 地址栏信息

hash 哈希值
pathname 地址名称
search 查询信息
state 跳转传入的参数

1.链接传参

<NavLink to='/produce/abc'>产品abc</NavLink>

2.参数传参

<Route path='/produce/:id' component={Produce}></Route>

3.参数获取

<h1>{props.match.params.id}</h1>