Reactjs reactrouter 在子组件中获取 this.props.location

V6

您可以在组件中使用useNavigate、useLocation和useMatch来获得matchPath、navigate和location.

const Child = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const match = useMatch("write-the-url-you-want-to-match-here");

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

export default Child

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

您可以在组件中使用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

V4 & V5

您可以使用withRouter HOC在组件props 中注入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在你的组件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

如果你不想使用props ，可以使用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
}

然后，您将能够使用如下上下文访问子组件中的location对象

class Child extends React.Component{
   
   render() {
     return (
       <div>{this.context.location.pathname}</div>
     )
   }
   
}

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