ReactRouterV6如何獲取當(dāng)前路由參數(shù)
更新時(shí)間：2024年03月14日 09:34:36 作者：一只學(xué)習(xí)中的小白
這篇文章主要介紹了ReactRouterV6如何獲取當(dāng)前路由參數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
1.由于v6把舊版本中的路由組件
能收到的三個(gè)參數(shù)(Location，history，match)移除了
所以不能直接使用this.props.location.pathname獲取到當(dāng)前路由
而且withRouter也移除了
2.在v6獲取當(dāng)前路由，需要自己定義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() {
//能夠調(diào)用到了
console.log(this.props.location)
return (
<div>
</div>
)
}
}
export default withRouter(index)
4.結(jié)果
如下：
（按自己需要獲取即可）：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件
這篇文章主要介紹了React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
一起來學(xué)習(xí)React元素的創(chuàng)建和渲染
這篇文章主要為大家詳細(xì)介紹了React元素的創(chuàng)建和渲染，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家介紹了React組件實(shí)例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Immutable 可以給 React 應(yīng)用帶來數(shù)十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發(fā)明，因?yàn)橥?React 太火，它的光芒被掩蓋了。這篇文章主要介紹了Immutable及 React 中的實(shí)踐,需要的朋友可以參考下2018-03-03
這篇文章主要為大家介紹了ahooks正式發(fā)布值得擁有的React?Hooks工具庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了使用useEffect模擬組件生命周期，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
react-i18next 是基于 i18next 的一款強(qiáng)大的國際化框架，可以用于 react 和 react-native 應(yīng)用，是目前非常主流的國際化解決方案。這篇文章主要介紹了React國際化react-i18next的相關(guān)知識,需要的朋友可以參考下2021-10-10
瀏覽器中視頻播放器實(shí)現(xiàn)的基本思路與代碼
這篇文章主要給大家介紹了關(guān)于瀏覽器中視頻播放器實(shí)現(xiàn)的基本思路與代碼,并且詳細(xì)總結(jié)了瀏覽器中的音視頻知識,對大家的理解和學(xué)習(xí)非常有幫助,需要的朋友可以參考下2021-08-08
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫，主要用于構(gòu)建 UI，而不是一個(gè) MVC 框架，React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它2017-05-05
這篇文章主要介紹了React中的生命周期用法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03