ReactRouterV6如何获取当前路由参数
更新时间：2024年03月14日 09:34:36 作者：一只学习中的小白
这篇文章主要介绍了ReactRouterV6如何获取当前路由参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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?Hooks中?useRef和useImperativeHandle的使用方式
这篇文章主要介绍了React?Hooks中?useRef和useImperativeHandle的使用方式,文中说明了useRef和useCallback一起使用,?可以解决闭包陷阱的问题,本文结合实例代码介绍的非常详细,需要的朋友可以参考下2023-10-10
本篇文章主要介绍了react native与webview通信的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
今天带来大家学习react-diagram 序列化Json解读的相关知识，本文通过多种案例给大家分析序列化知识，通过图文并茂的形式给大家介绍的非常详细，感兴趣的朋友一起看看吧2021-05-05
React?中的事件，是对原生事件的封装，叫做合成事件。抽象出一层合成事件，是为了做兼容，抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度，带大家解读下源码，感兴趣的可以了解一下2022-12-12
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2022-10-10
这篇文章主要为大家介绍了Reactjs?错误边界优雅处理方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了详解React中Fragment的简单使用，文中通过示例代码介绍的非常详细，对我们学习React有一定的帮助，感兴趣的小伙伴们可以参考一下2022-10-10
react quill中图片上传由默认转成base64改成上传到服务器的方法
这篇文章主要介绍了react quill中图片上传由默认转成base64改成上传到服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法2022-11-11
这篇文章主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论