欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評論