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 ( <> ) } react路由使用的是模糊匹配，如果想要精准匹配的话需要在路由上加 exact 关键字 • 1 路由组件中间不能有空格，否则会报错 {/* 中间有空格，报错 */} • 1 react的参数传递 路由跳转的链接上可以携带参数，在组件上用 :id 携带 购物车 • 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 ( ) } 嵌套路由重定向的小坑 如果子路由内有嵌套路由，在父级路由组件上不能加 exact 关键字，否则会匹配不上导致重定向失败 {/* 当前路由为父级路由 如果跳转的路由页面内部有嵌套路由，则不能在当前页加exact */}