React 路由
准备
react路由在使用前需要装包
npm i react-router-dom@5.3.0 • 1
装完包后就可以在对应的页面使用了，下面是路由的几个常用方法
import { HashRouter as Router, Route, Link,NavLink,Switch,Redirect,useHistory } from 'react-router-dom' • 1
说明：
HashRouter 哈希模式路由 —HashRouter as Router这种写法为取别名 Router
Route 路由组件 执行路由分发
Link 链接上显示的路由更新 类似于a标签
NavLink 路由更新 跟Link效果相同，但是NavLink上会有class类名active ，可以通过类名设置高亮
Switch 用Swich包裹路由组件，不管有多少个路由匹配成功，都只会显示第一个匹配的组件，不设置path属性，将404页对应的路由放在switch内部的最后位置，没有匹配到路由时会显示最后的那个404路由
Redirect 路由重定向
useHistory 路由历史模式
基础路由演示
import React from "react" import './App.scss' // 给路由取别名 Router 哈希模式 import { HashRouter as Router, Route, Link,NavLink,Switch,Redirect } from 'react-router-dom' import Home from './Component/Home' import GoodsClass from './Component/GoodsClass' import Cart from './Component/Cart' import My from './Component/My' import Page404 from './Component/Page404' export default function App() { return ( <> <div>App <br /> <Router> <Link to='/home'>首页</Link> <br /> <Link to='/goodsClass'>分类</Link> <br /> <Link to='/cart'>购物车</Link> <br /> <NavLink to='/my'>我的</NavLink> <hr /> <Switch> <Redirect from="/" exact to={'/home'}></Redirect> <Route path='/home' exact component={Home}></Route> <Route path='/goodsClass' exact component={GoodsClass}></Route> <Route path='/cart' exact component={Cart}></Route> <Route path='/my' component={My}></Route> {/* 如果未匹配到路由则会显示404路由 配合Switch使用 */} <Route component={Page404}></Route> </Switch> </Router> </div> </> ) }
react路由使用的是模糊匹配，如果想要精准匹配的话需要在路由上加 exact 关键字
<Route path='/home' exact component={Home}></Route> • 1
路由组件中间不能有空格，否则会报错
<Route path='/home' exact component={Home}> </Route> {/* 中间有空格，报错 */} • 1
react的参数传递
路由跳转的链接上可以携带参数，在组件上用 :id 携带
<Link to='/cart/3'>购物车</Link> <Route path='/cart/:id' exact component={Cart}></Route> • 1 • 2 • 3
路由跳转后接参
有两种接参方式
1. useParams
使用useParams接参前，需要引入
import { useParams } from "react-router-dom" const params = useParams() console.log(params); // 这里打印的就是路由携带的参数 • 1 • 2 • 3 • 4
2. props
直接使用props接参
export default function Cart (props) { console.log(props.match.params); // 这里打印的就是路由携带的参数 } • 1 • 2 • 3
路由跳转&&编程式导航
路由跳转的4种方式
使用 history 对象
import { useHistory } from "react-router-dom" const history = useHistory() • 1 • 2 • 3
1. push和goBack
// 页面回退 会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL history.push('/home') // 返回上一个页面 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL history.goBack() • 1 • 2 • 3 • 4 • 5
2. go
// 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页） 不会存储到历史记录中 history.go(-1) • 1 • 2
3. replace
// 进入/home ,在历史记录中用目标记录来替换当前记录 history.replace('/home') • 1 • 2
history.replace和push的区别
push：向历史记录中添加一条
replace：在历史记录中用目标记录来替换当前记录
示例
push
详情页 --> login页(push) ----> 主页 • 1
此时，从主页后退，会回到login页。
replace
详情页 --> login页(replace) ----> 主页 • 1
此时，从主页后退，会回到详情页。
嵌套路由
在对应的子路由嵌套路由即可，跟父级路由的写法一样，下面是路由演示
import React from "react" import { Route,NavLink,Switch,Redirect } from "react-router-dom" import MyOrder from './MyOrder' import MyGoods from './MyGoods' export default function My () { return ( <div>My <br /> <ul> <li> <NavLink to='/my/order'>我的订单</NavLink> </li> <li> <NavLink to='/my/goods'>我的商品</NavLink> </li> </ul> <Switch> <Redirect from='/my' exact to={'/my/order'}></Redirect> <Route path='/my/order' component={MyOrder}></Route> <Route path='/my/goods' component={MyGoods}></Route> </Switch> </div> ) }
嵌套路由重定向的小坑
如果子路由内有嵌套路由，在父级路由组件上不能加 exact 关键字，否则会匹配不上导致重定向失败
{/* 当前路由为父级路由 如果跳转的路由页面内部有嵌套路由，则不能在当前页加exact */} <Route path='/my' component={My}></Route>
