ReactRouterV6如何獲取當前路由參數(shù)
1.由于v6把舊版本中的路由組件
能收到的三個參數(shù)(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() { //能夠調(diào)用到了 console.log(this.props.location) return ( <div> </div> ) } } export default withRouter(index)
4.結(jié)果
如下:
(按自己需要獲取即可):
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
React+TS+IntersectionObserver實現(xiàn)視頻懶加載和自動播放功能
通過本文的介紹,我們學習了如何使用 React + TypeScript 和 IntersectionObserver API 來實現(xiàn)一個視頻播放控制組件,該組件具有懶加載功能,只有在用戶滾動頁面且視頻進入視口時才開始下載視頻資源,需要的朋友可以參考下2023-04-04React在弱網(wǎng)環(huán)境下限制按鈕多次點擊,防止重復(fù)提交問題
這篇文章主要介紹了React在弱網(wǎng)環(huán)境下限制按鈕多次點擊,防止重復(fù)提交問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06詳解關(guān)于react-redux中的connect用法介紹及原理解析
本篇文章主要介紹了詳解關(guān)于react-redux中的connect用法介紹及原理解析,非常具有實用價值,需要的朋友可以參考下2017-09-09react antd如何防止一份數(shù)據(jù)多次提交
這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10React中實現(xiàn)編輯框自動獲取焦點與失焦更新功能
在React應(yīng)用中,編輯框的焦點控制和數(shù)據(jù)回填是一個常見需求,本文將介紹如何使用useRef和useEffect鉤子,在組件中實現(xiàn)輸入框自動獲取焦點及失焦后更新數(shù)據(jù)的功能,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-01-01react用Redux中央倉庫實現(xiàn)一個todolist
這篇文章主要為大家詳細介紹了react用Redux中央倉庫實現(xiàn)一個todolist,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09