withRouter() 在非路由组件中使用路由库的api

最新推荐文章于 2024-09-09 21:33:23 发布

承蒙时光不弃1769203735

最新推荐文章于 2024-09-09 21:33:23 发布

阅读量516

点赞数 1

分类专栏：前端 js 文章标签： withRouter()

本文链接：https://blog.csdn.net/qq_36742720/article/details/89925456

版权

前端同时被 2 个专栏收录

155 篇文章 2 订阅

订阅专栏

32 篇文章 0 订阅

订阅专栏

我们知道，在非路由组件中，是拿不到例如像 this.props.location.pathname 数据。

倘若我们想拿到类似这种路由数据，可以使用withRouter()将非路由组件包装成路由组件。用法与redux中的connect类似。

如下：

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

// 希望在非路由组件中使用路由库的api
// withRouter()
class NavFooter extends Component {

    render() {
        const path = this.props.location.pathname   // 只有路由组件才能访问location等。所以要用withRouter包装成路由组件
        return (
            <div>当前路由是{path}</div>
        )
    }
}
// 向外暴露withRouter()包装产生的组件
// 内部会向组件中传入一些路由组件特有的属性： history  location  math
export default withRouter(NavFooter)