react中v5路由（分别在函数组件和类组件中）
v6路由https://blog.csdn.net/kkkys_kkk/article/details/134851952?spm=1001.2014.3001.5502
目录
类组件
基本配置
路由重定向
Switch的使用
模糊匹配和精确匹配
声明式导航与编程式导航
二级路由
路由配置
动态路由
动态路由的三种方式
1.params方式
2.query方式
3.state方式
路由对象 withRouter
路由守卫
路由懒加载
函数组件
类组件
基本配置
1. 下载 react - router - dom 5 的版本
npm i react-router-dom@5 2. 在 入口文件 index.js 中配置
import ReactDOM from 'react-dom/client';
import App from './App';
// 从react-router-dom中引入BrowserRouter模块并重命名为Router
import { BrowserRouter as Router } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
{/* 将App组件用Router包裹起来 */}
）；
3.在app.js文件配置
（在这里因为我们的路由组件包裹的是app文件，所以可以把app.js文件看作路由表来理解）
*创建components文件夹，新建Home.js和New.js文件，引入
import { Link, Route } from 'react-router-dom';
//通过 Route 模块的 path 属性和 component 属性设置路径和组件的对应关系
import Home from './components/Home';
import News from './components/News';
import { Link, Route } from 'react-router-dom'
function App() {
return (
首页 //to属性跳转
新闻
*to属性为对象格式时：
pathname: 设置路由跳转的路径
query: 已经转化成字符串的键值对的对象，保存在 location 中
state ：保存在 location 中的 state
Navlink的使用
当我们希望给当前的路由添加一个样式的时候，我们可以使用 NavLink 模块来替代 Link 模块
import { NavLink, Route } from 'react-router-dom'
function App() {
return (
首页
新闻
*给NavLink添加 activeclassname 属性，属性名为class名。然后在样式中定义 active 的样
式，默认的自带属性，class=‘active’、
路由重定向
*通过redirect实现，from: 从哪个路径而来，to: 要跳转到哪个路径
//引入redirect模块
import { NavLink, Route, Redirect } from 'react-router-dom'
function App() {
return (
首页
新闻
Switch的使用
*解决路由切换后，刷新页面还停留在本页面问题
//引入Switch模块
import { NavLink, Route, Redirect, Switch } from 'react-router-dom'
function App() {
return (
首页
新闻
); *当我们刷新时，因为我们的 路由表 会从头到尾执行一遍，即使它已经匹配到当
前路径了，但是它也会把下面的路由，执行完毕，那么就导致了我们最后无论如何都会
执行到 Redirect 。有点类似于 switch 语句中的 case 穿透问题。虽然我们每次都是在当
前路由上刷新的，但当 Redirect 执行的时候就又被重定向到 Home 页面了。
*Switch 的作用就是让当前路径如果被匹配到了，那么就不在向下继续匹配了。类似于
switch 语句中的 break 的作用。来防止穿透
模糊匹配和精确匹配
模糊匹配：
我们的根路径 ‘/‘ 会匹配到任何路径，因为任何路径都是以 / 开头的。我们把 / 这样的路径叫做父路径，把例如： /home 、 /new叫做子路径。那么父路径会匹配它下面的所有子路径。
例如： /home 会匹配到 /home/aaa 、 /home/bbb 等。因为 /home/aaa 、 /home/bbb 都是 /home
的子路径
精确匹配：
所以在 Redirect 中需要精确匹配到 / ，而 / 的子路径不能被匹配到。那么我们就需要使用 exact
属性来进行精确匹配
*创建一个NotFount页面，访问不存在页面重定到该页面
import { NavLink, Route, Redirect, Switch } from 'react-router-dom'
import NotFount from "./components/NotFount";
function App() {
return (
首页
新闻
);
}声明式导航与编程式导航
*通过Link跳转的是声明式导航
*通过js提供的api来实现的跳转的导航叫做编程式导航
// Home.js
*history 对象常用方法：
push ：路由跳转。 push 里面传递的参数和 NavLink 中的 to 属性的参数是一样的
go(num) ：前进或后退 n 级
goBack() ： go(-1) ，后退一级
goForward(): go(1) ，前进一级
二级路由
二级路由就是被 Route 渲染的组件下面还有路由表。那么被 Route 渲染的组件下面的被
Route 渲染的组件就是二级路由。如图所示
路由配置
*按照上面一级路由的格式，创建Course文件夹和 Course.js文件
import { Component } from 'react';
import { Route, NavLink, Switch, Redirect } from 'react-router-dom';
import JsCourse from './Course/Js';
import VueCourse from './Course/Vue'
import ReactCourse from './Course/ReactCourse'
export default class Course extends Component {
render() {
return (
Course
js课程
Vue课程
React课程
//二级路由配置
//跳转到不同的页面
)
}
}动态路由
*将某种模式下匹配到的所有路由，全都映射到同一个组件的方式就是动态路由。例如我们要把不同ID 的新闻内容全都映射到这个新闻组件。
*要实现动态路由匹配，那么我们就需要给路由传递参数
动态路由的三种方式
1.params方式
注册：注册路由的时候通过 :params 的形式来声明
{ /* 通过:id来声明我们要传递的参数是id */ }
路由匹配：
{ /* 此处的1、2就是传递的id参数 */ }
军事新闻
体育新闻 跳转方法：
//直接匹配值
this.props.history.push('/news/1')
//使用对象格式
this.props.history.push({ 'pathname': '/news', 'params': { id: 1 }
})获取参数方式：
const { id } = this.props.match.params2.query方式
query 方式传递的参数不需要在注册路由的时候声明
路由格式：
路由匹配 ：
{ /* 此处的1、2就是传递的id参数 */ }
军事新闻
体育新闻
获取参数方式：
const id = this.props.location.search.split('=')[1]3.state方式
state 方式传递的参数也不需要在注册路由的时候声明
路由匹配 ：
{ /* 此处的1、2就是传递的id参数 */ }
军事新闻
体育新闻
获取参数方式：
const { id } = this.props.location.state路由对象 withRouter
只有被路由管理的组件的 props 属性上才具有路由三大对象： history 、 location 、 match 。
当前组件必须是通过 Route 组件渲染出来的，该组件的 props 上才有路由三大对象
// 创建一个Home的子组件
class HomeChild extends Component {
componentDidMount() {
// 因为HomeChild这个组件是直接渲染在Home组件中，并不是通过Route组件渲染出来
的。所以HomeChild这个组件并没有被路由所管理，因此该组件的props属性上不具有路
由三大对象
console.log(this.props) // 打印出空对象
}
render() {
return (
我是Home组件的子组件
)
}}withRouter 模块可以让没有被路由管理的组件也可以获取到路由三大对象
使用方式：
import { withRouter } from 'react-router-dom';
// withRouter方法接收一个组件作为参数，然后返回一个具有路由三大对象的组件
const myComponentWith = withRouter(myComponent)ex：
// components/HomeChild.js
import { Component } from 'react'
import { withRouter } from 'react-router-dom'
// 创建一个Home的子组件
class HomeChild extends Component {
componentDidMount() {
console.log(this.props) // 打印出路由三大对象
}
render() {
return (
我是Home组件的子组件
) }}
export default withRouter (HomeChild)*使用withRouter 包裹组件
路由守卫
当我们进行路由跳转的时候，有时候需要满足某种条件才能跳转，比如只有我们登录成功之后才能
到首页面，否则就不能进入到首页面。那么这个时候我们就需要对路由进行拦截。这就是路由导航
守卫。
在app.js文件中封装函数，通过返回true和false，在Router中进行三元判断
import { Route, Redirect, Switch } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
function App(props) {
// 验证是否登录成功的函数
const LoginVerfiy = () => {
if(sessionStorage.token) {
return true;
} else {
return false;
}
}
return (
{/* 通过render属性来渲染组件 */}
LoginVerfiy() ?
);
}
export default App;路由懒加载
React 中的路由懒加载是基于 React.lazy 方法和 组件实现的
*声明变量来接收页面，首字母大写
*Suspense中包含一个fallback属性，可以在网络请求等待时显示加载效果
import React, { Component, Suspense } from 'react'
import { Route, NavLink, Switch } from 'react-router-dom'
const Home = React.lazy(() => import('./components/Home'))
const Course = React.lazy(() => import('./components/Course'))
export default class App extends Component {
render() {
return (
{/* 路由跳转 */}
首页
课程
{/* 路由表 */}
加载中... }>
函数组件
基本配置方法和类组件一样的，在这只说不同的点，传参方法和接受方法
首先是传参，在函数组件中，我们使用的都是钩子函数，所以我们在进行路由跳转的时候，引入useHistory（）函数，声明一个变量来接收该方法，在代码中使用push方法进行跳转，传参与类组件是一样的
import {useHistory} from "react-router-dom" // 引入该方法
export default function App() {
const history = useHistory() //定义一个变量来接受该方法
console.log(history);
return (
接收参数：
使用 params 方法传参时，使用useParams（）方法接收；
使用query方法传参时 ，使用useLocation（）方法接收
在使用前都要进行方法的引用
import React from 'react'
import { useLocation, useParams } from 'react-router-dom';
export default function Shang() {
const{id} = useParams() //接受的路由动态参数
const {search} =useLocation() //参数在search参数中包括，使用结构赋值获取变量值
console.log(search);
return (
//使用search，需要对数据进行一个处理
商品的页面{search.split("=")[1]}
//使用params传递的动态路由参数
商品的页面{id}
)
}