react-router-domV6版本改版踩坑记录
更新时间：2024年03月14日 09:29:06 作者：HL477
这篇文章主要介绍了react-router-domV6版本改版踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.父组件注册路由
v5版本：
import { Route } from 'react-router-dom'
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
v6版本：
import { Route } from 'react-router-dom'
<Route path="about" element={<About />} />
<Route path="home" element={<Home />} />
2.NavLink点击高亮显示
v5版本：
import { NavLink } from 'react-router-dom'
<NavLink activeClassName="highlight" className="about" to="/about" >About</NavLink>
v6版本：
以下二者选一即可，一定要注意 （isActive ? " highlight"） highlight前面的空格！！！
// 官方写法
<NavLink className={({ isActive }) => "about" + (isActive ? " highlight" : "")} to="about">About</NavLink>
// ES6 模版字符串写法
<NavLink className={({ isActive }) => `about ${isActive ? "highlight" : ""}`} to="about">About</NavLink>
3.Switch（单一匹配）更换为Routes
import { Routes,Route } from 'react-router-dom'
<Routes>
<Route path="about" element={<About />} />
<Route path="home" element={<Home />} />
</Routes>
4.Redirect重定向
v5版本：
import ｛ Redirect ｝from 'react-router-dom'
<Routes>
<Route path="/about" element={<About />} />
<Route path="/home" element={<Home />} />
// 写在这里
<Redirect to="/about" />
</Routes>
v6版本：
import ｛ Navigate ｝from 'react-router-dom'
<Routes>
<Route path="about/*" element={<About />} />
<Route path="home/*" element={<Home />} />
// 写在这里
<Route path="/*" element={<Navigate to="/about" />} />
</Routes>
5.嵌套路由
v5版本:
// 父组件
<Route path="home/" element={<Home />} />
// 路由链接
<NavLink className="about" to="/home/news" >News</NavLink>
// 注册路由和重定向
<Switch>
<NavLink className="news" to="/home/news" >News</NavLink>
<NavLink className="message" to="/home/message" >Message</NavLink>
<Redirect to="/home/news" />
</Switch>
v6版本：
// 父组件
<Route path="home/*" element={<Home />}>
// 路由链接
<NavLink className="news" to="news" >News</NavLink>
<NavLink className="message" to="news" >News</NavLink>
// 注册路由和重定向
<Routes>
<Route path="news" element={<News />} />
<Route path="message" element={<Message />} />
<Route path="/" element={<Navigate to="news" />} />
</Routes>
6.params参数传递
v5版本：
//路由链接(携带参数)：
<Link to='/demo/test/tom/18'}>详情</Link>
//或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>
//注册路由(声明接收)：
<Route path="/demo/test/:name/:age" component={Test}/>
//接收参数：
this.props.match.params
v6版本：
//路由链接(携带参数)：
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
//或 <Link to={`/b/child1/${id}/${title}`}>Child1</Link>
//注册路由(声明接收)：
<Route path="/b/child1/:id/:title" element={<Test/ >} />
//接收参数：接收参数的组件一定要是函数式声明的（class不可以）！！！
import { useParams } from "react-router-dom";
const params = useParams();
//params参数 => {id: "01", title: "消息1"}
7.search参数
v5版本：
//路由链接(携带参数)：
<Link to='/demo/test?name=tom&age=18'}>详情</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>
//接收参数：
this.props.location.search
//备注：获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan)，需要借助query-string解析参数成对象
v6版本：
//路由链接(携带参数)：
<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/b/child2" component={Test}/>
//接收参数方法1：接收参数的组件一定要是函数式声明的（class不可以）！！！
import { useLocation } from "react-router-dom";
import { qs } from "url-parse";
const { search } = useLocation();
const searchs = qs.parse(search)
//search参数 => {age: "20", name: "zhangsan"}
//接收参数方法2：接收参数的组件一定要是函数式声明的（class不可以）！！！
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
// console.log( searchParams.get("id")); // 12
//备注：获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan)，需要借助 url-parse 里面的 qs.parse 解析参数成对象
8.state参数
v5版本：
//路由链接(携带参数)：
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Test}/>
//接收参数：
this.props.location.state
//备注：刷新也可以保留住参数
v6版本：
//通过Link的state属性传递参数
<Link
className="nav"
to={`/b/child2`}
state={{ id: 999, name: "i love merlin" }}
>
Child2
</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/b/child2" component={Test}/>
//接收参数：接收参数的组件一定要是函数式声明的（class不可以）！！！
import { useLocation } from "react-router-dom";
const { state } = useLocation();
const { xx, xx } = state || {}
//state参数 => {id: 999, name: "我是梅琳"}
//备注：刷新也可以保留住参数
9.编程式路由跳转
v5版本
v5版本：push跳转携带params参数
props.history.push(`/b/child1/${id}/${title}`)v5版本：push跳转携带search参数
props.history.push(`/b/child1?id=${id}&title=${title}`);v5版本：push跳转携带state参数
props.history.push(`/b/child1`, { id, title });v5版本：前进
this.props.history.goForward();
v5版本：后退
this.props.history.goBack();
v5版本：前进或回退 ( go )
this.props.history.go(-2); //回退到前2条的路由
v5版本：replace跳转携带params参数
this.props.history.replace(`/home/message/detail/${id}/${title}`)v5版本：replace跳转携带search参数
this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)v5版本：replace跳转携带state参数
this.props.history.replace(`/home/message/detail`, { id, title });v5版本：在一般组件中使用编程式路由导航 (非路由组件)
import {withRouter} from 'react-router-dom'
class Header extends Component {
// withRouter(Header)后，就可以在一般组件内部使用 this.props.history
//...
}
export default withRouter(Header)
v6版本
v6版本：
// v6版本编程导航使用 useNavigate
import { useNavigate } from "react-router-dom";
export default function A() {
const navigate = useNavigate();
//...
}
v6版本：push跳转携带params参数
navigate(`/b/child1/${id}/${title}`);v6版本：push跳转携带search参数
navigate(`/b/child2?id=${id}&title=${title}`);v6版本：push跳转携带state参数
navigate("/b/child2", { state: { id, title }});v6版本：前进
<button onClick={() => navigate(1)}>Go Forword</button>v6版本：后退
<button onClick={() => navigate(-1)}>Go back</button>v6版本：前进或后退几步
<button onClick={() => navigate(2)}>Go</button>v6版本：replace跳转携带params参数
navigate(`/b/child1/${id}/${title}`,{replace: true});v6版本：replace跳转携带search参数
navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});v6版本：replace跳转携带state参数
navigate("/b/child2", { state: { id, title },replace: true});10.函数组件使用生命周期需要用 useEffect
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
// 这里的作用是 componentDidMount
export default function News() {
const navigate = useNavigate()
useEffect(() => {
setTimeout(() => {
navigate("/home/message")
}, 2000)
})
return (
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
)
}
11.withRouter（v6版本弃用）
直接使用 useNavigate 即可
12.class组件没有this.props.history问题
// 我是这样解决的：父组件App用函数式组件并引入 useNavigate 然后传给子组件使用
// 父组件
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
export default function App() {
const navigate = useNavigate()
return (
<Routes>
<Route path="/login" element={<Login navigate={navigate} />}> <Route path="/" elment={<Admin />}>
</Routes>
)
}
// 子组件
export default class Login extends Component {
// 定义跳转的方法
jump = () => {
this.props.navigate('/')
}
render() {
return (
<button onClick={this.jump}>点击跳转</button>
)
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了React18新增特性released的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
React报错之Object is possibly null的问题及解决方法
这篇文章主要介绍了React报错之Object is possibly null的问题,造成 "Object is possibly null"的错误是因为useRef()钩子可以传递一个初始值作为参数，而我们传递null作为初始值，本文给大家分享详细解决方法，需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了React纯前端模拟实现登录鉴权的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了React注册倒计时功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
React SSR架构Stream Rendering与Suspense for Data Fetching
这篇文章主要为大家介绍了React SSR架构Stream Rendering与Suspense for Data Fetching解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
React 中的事件，是对原生事件的封装，叫做合成事件。这篇文章主要通过几个简单的示例为大家详细介绍一下React中的合成事件，感兴趣的可以了解一下2023-02-02
本篇文章主要介绍了浅谈React 服务器端渲染的使用，React是最受欢迎的客户端 JavaScript 框架，在本教程中，我们将逐步向您介绍服务器端的渲染示例2018-05-05
这篇文章主要介绍了React类组件的更新过程,包括组件初始化、更新和卸载的生命周期方法,以及如何使用setState和forceUpdate来控制视图的更新,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要介绍了React+Antd实现可增删改表格的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家介绍了React Ref Callback使用场景最佳实践详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论