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

react-router getting this.props.location in child components

提问by xiaofan2406

As I understand <Route path="/" component={App} />will gives Approuting-related props like locationand params. If my Appcomponent has many nested child components, how do I get the child component to have access to these props without:

据我了解，<Route path="/" component={App} />将提供App与路由相关的道具，如location和params。如果我的App组件有许多嵌套的子组件，我如何让子组件无需访问这些道具：

• passing props from App
• using window object
• creating routes for nested child components

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

I thought this.context.routerwould have some information related to the routes, but this.context.routerseems to only have some functions to manipulate the routes.

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

回答by QoP

(Update) V5.1 & Hooks (Requires React >= 16.8)

(更新) V5.1 & Hooks (需要 React >= 16.8)

You can use useHistory, useLocationand useRouteMatchin your component to get match, historyand location.

您可以在组件中使用useHistory,useLocation和useRouteMatch来获取match,history和location。

const Child = () => {
  const location = useLocation();
  const history = useHistory();
  const match = useRouteMatch("write-the-url-you-want-to-match-here");

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

export default Child

(Update) V4 & V5

(更新) V4 & V5

You can use withRouterHOC in order to inject match, historyand locationin your component props.

您可以使用withRouterHOC 来注入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)

(Update) V3

(更新) V3

You can use withRouterHOC in order to inject router, params, location, routesin your component props.

你可以使用withRouterHOC 来在你的组件 props 中注入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)

Original answer

原答案

If you don't want to use the props, you can use the context as described in React Router documentation

如果你不想使用 props，你可以使用React Router 文档中描述的上下文

First, you have to set up your childContextTypesand getChildContext

首先，您必须设置您的childContextTypes和getChildContext

class App extends React.Component{

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

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

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

Then, you will be able to access to the location object in your child components using the context like this

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

class Child extends React.Component{

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

}

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