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>
    )
  }
}

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

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

我无法找到任何方法来更新地址栏中的链接，而不会显示用户或使用React Router DOM将用户重定向到新组件（我是否以正确的方式进行操作？）
< / li>
基于此，然后我使用window.location.pathname向某些组件添加一些特定样式）

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

Answer 1

withRouter为您提供最接近的<Route>的路线道具，并且由于Navigation组件不在Route内，因此您不会得到route props

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

示例

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>
    );
  }
}

withRouter不会将路线道具传递给组件

1 个答案: