React-Router erhält this.props.location in untergeordneten Komponenten

Wie ich es verstehe <Route path="https://stackoverflow.com/" component={App} /> Wille gibt App Routing-bezogene Requisiten wie location und params. Wenn mein App Komponente hat viele verschachtelte untergeordnete Komponenten, wie bekomme ich die untergeordnete Komponente, um Zugriff auf diese Requisiten zu haben, ohne:

• vorbei Requisiten von App
• Fensterobjekt verwenden
• Erstellen von Routen für verschachtelte untergeordnete Komponenten

ich dachte this.context.router hätte einige Informationen zu den Routen, aber this.context.router scheint nur einige Funktionen zu haben, um die Routen zu manipulieren.

V6

Sie können verwenden useNavigate, useLocation und useMatch in Ihrer Komponente zu bekommen matchPath, navigate und 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 (erfordert React >= 16.8)

Sie können verwenden useHistory, useLocation und useRouteMatch in Ihrer Komponente zu bekommen match, history und 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

Sie können verwenden withRouter HOC, um zu injizieren match, history und location in Ihren Komponenten-Requisiten.

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

Sie können verwenden withRouter HOC, um zu injizieren router, params, location, routes in Ihren Komponenten-Requisiten.

class Child extends React.Component {

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

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

export default withRouter(Child)

Ursprüngliche Antwort

Wenn Sie die Requisiten nicht verwenden möchten, können Sie den Kontext wie in beschrieben verwenden React Router-Dokumentation

Zuerst müssen Sie Ihre einrichten childContextTypes und getChildContext

class App extends React.Component{
  
  getChildContext() {
    return {
      location: this.props.location
    }
  }

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

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

Dann können Sie mithilfe des Kontexts wie diesem auf das Standortobjekt in Ihren untergeordneten Komponenten zugreifen

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

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

Wenn die obige Lösung für Sie nicht funktioniert hat, können Sie sie verwenden import { withRouter } from 'react-router-dom';

Damit können Sie Ihre untergeordnete Klasse exportieren als –

class MyApp extends Component{
    // your code
}

export default withRouter(MyApp);

Und deine Klasse mit Router –

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