Question

我试图弄清楚如何将React Router的位置信息传递给组件。

我的路线定义如下：

<Route
  path="placeholder"
  render={(props) => <Navigation {...props} />}
/>

在我的导航组件中，我在render方法中执行console.log(this.props);只是为了获得一个空对象。是什么赋予了？定位道具不是应该自动提供给Route内的任何组件吗？

顺便说一句，我使用的是react-router-dom版本4.2.2。

Answer 1

您需要用withRouter弯曲组件，以便在组件道具中注入match，history和location。

import { withRouter } from 'react-router-dom';
class Navigation extends React.Component {

  render() {
    const { match, location, history } = this.props
    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Navigation)

Answer 2

您需要在主要组件上使用withRouter中的'react-router-dom'函数，在该组件上设置包装在Switch中的路径，并且您应该可以使用this.props.location来访问导航组件上的位置道具

App.js


Class App extends Component {
  render(){
    return (
        <Aux>
            <Switch>
                <Route path="/login" exact component={Login}/>
                <Route path="/Navigation" component={Navigation}/>
                <Redirect to="/login"/>
            </Switch>
        </Aux>
    );
  }
}
export default withRouter(App);

如何将React Router位置道具传递给组件？

2 个答案: