react

2023-09-15 22:06| 来源: 网络整理| 查看: 265

前言

react-router-dom 是react中通用的路由组件，随着新版本的更新，尤其是为了配合 react hook 的 v6版本，已经在使用上有了较大的变化，本文旨在对比旧版本（v5），以及介绍新版本的使用

react-router-dom 的版本介绍

v5文档： https://v5.reactrouter.com/web/guides/quick-start

本文使用的两个版本： v5(5.3.0) 和 v6(6.1.1) 其中： v5版本既兼容了 class component（react v16.8前），又兼容了function component(v16.8及以后，即hook) v6版本，若仍然使用this.props.history.push()，此时props会提示是空值，v6文档里把路由组件默认接受的三个属性给移除了，官网文档里给出的解决方案是使用useNavigate()这个hook，但是hook只能存在于无状态组件（function component），无法用在类组件中（class component）

所以，仍然使用class commponent（类组件）进行项目开发的，建议react-router-dom 使用v5及以前的版本（最新的v5版本是 v5.3.0）如果使用 function component（函数组件）进行项目开发的，建议使用最新的v6版本（v5版本虽然兼容了hook用法，但是相比v6还是有点区别）

react-router-dom 在 class component 类组件中的用法（v5.3.0） import React from "react"; import { Router, Route, Switch, Redirect, HashRouter } from "react-router-dom"; import { createHashHistory } from "history"; ... const route = () => ( {/* 不可放在首行 */} {/* */} {/* 其他匹配重定向 */} ); export default route;

注意：和的区别 ==> 似乎没有区别

路由跳转： this.props.history.push('/listPage')：路由入栈 this.props.history.replace('/listPage')：路由替换

路由返回： this.props.history.goBack();: 返回上一级路由

携带参数： state属性携带参数：（隐式传参）

this.props.history.push({ pathname: '/listPage', state: { aaa: 123 }, }); // 跳转后新页面通过 this.props.history.location.state 获取 // http://localhost:3000/#/listPage

search属性携带参数：（显式传参）

this.props.history.push({ pathname: '/listPage', search: '?bbb=456', }); // 跳转后新页面通过 this.props.history.location.search 获取 // url: http://localhost:3000/#/listPage?bbb=456

路由传参携带参数：（显式传参，需要router.js 中配合）

this.props.history.push({ pathname: '/detailPage' + '/' + id, }); // 需要router.js 中路由配合： // 跳转后新页面通过this.props.match.params.id 获取 // url: http://localhost:3000/#/detailPage/789

react-router-dom 在 function component 函数组件中的用法（v6.1.1），即hook import React from "react"; import { HashRouter, Route, Routes, Navigate } from "react-router-dom"; ... const route = () => ( {/* */} ); export default route;

注意点：

Routes 替换了 Switch Route中 element 替换了 component/render 属性，且值是组件，而非组件名 Navigate 组件替换了 Redirect

路由跳转

import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); // push navigate(path); // replace navigate(path, {replace: true});

路由返回

const navigate = useNavigate(); // go back navigate(-1);

携带参数： state属性携带参数：（隐式传参）

const navigate = useNavigate(); navigate('/listPage', { state: { aaa: '123', } }) // url: http://localhost:3000/#/listPage

search属性携带参数：（显式传参）

const navigate = useNavigate(); navigate('/listPage' + '?bbb=456') // url: http://localhost:3000/#/listPage?bbb=456

路由传参携带参数：（显式传参，需要router.js 中配合）

const navigate = useNavigate(); navigate('/detailPage' + '/' + id) // 需要router.js 中路由配合： // 跳转后新页面通过 const { id } = useParams(); 获取，其中useParams 为 react-router-dom 内方法 // url: http://localhost:3000/#/detailPage/789

总结

v5 和 v6 的比较： router.js 路由文件中：

Switch 改用 Routes component/render 属性改为 element Redirect 改用 Navigate

路由跳转、传参：

history.push(path) 改为 navigate(path) history.replace(path) 改为 navigate(path, {replace: true}) history.goBack() 改为 navigate(-1) v5 中的 hook 使用比较： -v5：使用 useHistory 的 history.push() -v6：使用 useNavigate 的 navigate()

参考

https://juejin.cn/post/7042849947451916296 https://juejin.cn/post/7040289734836355085 https://juejin.cn/post/6862305213148381198

【本文地址】

公司简介

联系我们