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

【问题标题】：How to pass the React Router location prop to a component?如何将 React Router 位置道具传递给组件？
【发布时间】：2018-12-14 15:55:16
【问题描述】：

我正在尝试弄清楚如何将 React Router 的 location 属性传递给组件。

我有这样定义的路线：

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

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

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

【问题讨论】：

是的，你是对的。位置道具应该自动提供给 Route 内的任何组件。如果可能，您能否分享一些有关您的路由器设置和导航组件的详细信息？

标签： javascript reactjs routing routes react-router

【解决方案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)

【讨论】：

【解决方案2】：

您需要在主要组件上使用 'react-router-dom' 中的 withRouter 函数，在该组件中设置包裹在 Switch 中的路由，并且您应该可以使用 this.props.location 访问导航组件上的 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);

【讨论】：