withRouter 不会将 Route 道具传递给组件

Question

这是我的导航组件：

import React from 'react'

class Navigation extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      type: 'signUp', // or login
      showModal: false,
      isLoggedIn: false,
    }
  }

  ...some code

  render() {

    const { showModal, type, isLoggedIn } = this.state

    console.log(this.props.location); // all problem is this, I'm not getting it in console

    return(
      ...some more code
    )
  }
}

export default withRouter(Navigation)

这是它在 app.js 中使用的地方

class App extends React.Component {

  render () {
    return(
      <Router>
          <Fragment>

            <Navigation /> // <= right there

            <Switch>
              <Route exact path='/' component={HomePage}/>
              <Route exact path='/search' component={HomePage}/>
              <Route component={Lost} />
            </Switch>
          </Fragment>
      </Router>
    )
  }
}

我想在我的 <Navigation /> 组件中获得更新的路由道具，例如 match 和 location 和 history 但是我只有在组件第一次安装在 DOM 上时才得到它，在我的其他组件中，我使用window.history.pushState 更新路由，但在浏览器中的链接更新后，我无法从 withRouter 获取路由道具。

我用window.history.pushState 更新路线，因为：

1. 我找不到任何方法来更新地址栏中的链接而不显示用户或使用 React 路由器 DOM 将用户重定向到新组件（我这样做是否正确？）

2. 基于此，我然后使用window.location.pathname 为某些组件添加一些特定的样式）

另外，我阅读了this 和this 的全部内容，但我无法解决这个问题。我做错了什么？

Answer 1

withRouter 为您提供最接近<Route> 的路由道具，并且由于Navigation 组件不在Route 内，您将无法获得route props。

你可以例如将Navigation 组件放在始终可见的Route 之外的Route 上。

示例

class App extends React.Component {
  render() {
    return (
      <Router>
        <Fragment>
          <Route path="/" component={Navigation} />
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route exact path="/search" component={HomePage} />
            <Route component={Lost} />
          </Switch>
        </Fragment>
      </Router>
    );
  }
}