Question

我正在尝试获取有关非Route组件的当前路由的信息。

React Router提供历史的单例版本（browserHistory 和hashHistory）你可以从你的任何地方导入和使用应用

以前，您似乎可以使用browserHistory，但似乎不再受支持。我使用react-router-redux^4.0.8和@types\react-router-redux^5.0.1。

如何访问当前路线位置？

Answer 1

这很简单。您可以使用withRouter HOC

您可以访问历史对象的属性和最近的属性通过 withRouter 高阶组件路由匹配。 withRouter 将更新的匹配，位置和历史道具传递给包装组件何时呈现。

喜欢这个使用：

import {withRouter} from "react-router-dom"
@withRouter
class NonRouteComponent extends Component {
  render() {
    // you have access to this.props.match
    // you have access to this.props.history
    // you have access to this.props.location
    const { match, location, history } = this.props

    return <h1>Hi {location.pathname}</h1>;
  }
}

如果您不使用装饰器也称为@withRouter，您可以像这样导出组件：

class NonRouteComponent extends Component { ... }
export default withRouter(NonRouteComponent);

如何从我的应用程序中的任何位置访问当前路线？

1 个答案: