react-router在子组件中获取this.props.location

Question

据我所知，<Route path="/" component={App} />会为App提供location与路由相关的道具，例如params和App。如果我的this.context.router组件有许多嵌套的子组件，如何让子组件无法访问这些道具：

• 从App
传递道具
• 使用窗口对象
• 为嵌套子组件创建路径

我认为this.context.router会有一些与路线相关的信息，但{{1}}似乎只有一些功能来操纵路线。

Answer 1

（更新）V4＆amp; V5

您可以使用withRouter HOC在您的组件道具中注入match，history和location。

class Child extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Child)

（更新）V3

您可以使用withRouter HOC在您的组件道具中注入router，params，location，routes。

class Child extends React.Component {

  render() {
    const { router, params, location, routes } = this.props

    return (
      <div>{location.pathname}</div>
    )
  }
}

export default withRouter(Child)

原始回答

如果您不想使用道具，可以使用React Router documentation

中描述的上下文

首先，您必须设置childContextTypes和getChildContext

class App extends React.Component{

  getChildContext() {
    return {
      location: this.props.location
    }
  }

  render() {
    return <Child/>;
  }
}

App.childContextTypes = {
    location: React.PropTypes.object
}

然后，您将能够使用像这样的上下文访问子组件中的位置对象

class Child extends React.Component{

   render() {
     return (
       <div>{this.context.location.pathname}</div>
     )
   }

}

Child.contextTypes = {
    location: React.PropTypes.object
 }

Answer 2

如果上述解决方案不适合您，则可以使用import { withRouter } from 'react-router-dom';

---

使用此方法，您可以将子类导出为-

class MyApp extends Component{
    // your code
}

export default withRouter(MyApp);

还有您的路由器课程-

// your code
<Router>
      ...
      <Route path="/myapp" component={MyApp} />
      // or if you are sending additional fields
      <Route path="/myapp" component={() =><MyApp process={...} />} />
<Router>