ReactRouterV6如何获取当前路由参数
更新时间：2024年03月14日 09:34:36 作者：一只学习中的小白
这篇文章主要介绍了ReactRouterV6如何获取当前路由参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.由于v6把旧版本中的路由组件
能收到的三个参数(Location，history，match)移除了
所以不能直接使用this.props.location.pathname获取到当前路由
而且withRouter也移除了
2.在v6获取当前路由，需要自己定义withRouter
代码如下：
withRouter.js
import {useLocation, useNavigate } from "react-router";
import React from 'react'
export default function withRouter(Child) {
return (props) => {
const location = useLocation();
const navigate = useNavigate();
return <Child {...props} navigate={navigate} location={location} />;
}
}
3.在此使用写好的withRouter
按如下方式使用
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter' //在此引入自己的文件所在路径
class index extends Component {
render() {
//能够调用到了
console.log(this.props.location)
return (
<div>
</div>
)
}
}
export default withRouter(index)
4.结果
如下：
（按自己需要获取即可）：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React如何实现像Vue一样将css和js写在同一文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家详细介绍了React元素的创建和渲染，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以参考下2018-03-03
这篇文章主要为大家介绍了ahooks正式发布值得拥有的React Hooks工具库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了使用useEffect模拟组件生命周期，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。这篇文章主要介绍了React国际化react-i18next的相关知识,需要的朋友可以参考下2021-10-10
这篇文章主要给大家介绍了关于浏览器中视频播放器实现的基本思路与代码,并且详细总结了浏览器中的音视频知识,对大家的理解和学习非常有帮助,需要的朋友可以参考下2021-08-08
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它2017-05-05
这篇文章主要介绍了React中的生命周期用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
最新评论