从 Header 组件访问 this.props.location

Question

如您所知，this.props.location 只有在渲染的组件被包裹在 <Route /> 中时才可访问。

我不想通过在我拥有的每个组件中放置一个 this.props.location 来跟踪和保存用户导航的 URL，我只想通过放置一个 this.props.location 来提取位置在 Header。但是，Header 没有被 <Route /> 包裹，原因如下。

从路由树定义如下的 Header 组件访问 this.props.location 的最佳方法是什么：

...
import { BrowserRouter as Router, Route } from "react-router-dom";
...
      <Router>
        <div>
          <Header />
          <Route path="/dummy" component={Dummy} />
        </div>
      </Router>
...

Answer 1

您的问题有两种解决方案，

首先，有一个默认的路由，可以像

一样渲染Header

...
import { BrowserRouter as Router, Route } from "react-router-dom";
...
      <Router>
        <div>
          <Route component={Header} />
          <Route path="/dummy" component={Dummy} />
        </div>
      </Router>
...

其次： 在你的 Header 组件中使用 withRouter

import {withRouter} from 'react-router;
...
export default withRouter(Header);

从 Header 组件访问 this.props.location

Accessing this.props.location from a Header component

reactjs

react-router-v4