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

Soweit ich weiß <Route path="/" component={App} />, gibt Will AppRouting-bezogene Requisiten wie locationund params. Wenn meine AppKomponente viele verschachtelte untergeordnete Komponenten enthält, wie kann ich der untergeordneten Komponente Zugriff auf diese Requisiten gewähren, ohne:

• Requisiten aus App übergeben
• mit Fensterobjekt
• Erstellen von Routen für verschachtelte untergeordnete Komponenten

Ich dachte, ich this.context.routerhätte einige Informationen zu den Routen, aber es this.context.routerscheint nur einige Funktionen zu geben, um die Routen zu manipulieren.

(Update) V5.1 & Hooks (erfordert Reaktion> = 16.8)

Sie können verwendet werden useHistory, useLocationund useRouteMatchin der Komponente zu erhalten match, historyund 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

Sie können mit withRouterHOC einzuspritzen , um match, historyund locationin Ihrer Komponente 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)

(Update) V3

Sie können mit withRouterHOC einzuspritzen , um router, params, location, routesin der Komponente 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 der Dokumentation zu React Router beschrieben verwenden

Zuerst müssen Sie Ihr childContextTypesund einrichtengetChildContext

class App extends React.Component{

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

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

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

In diesem Kontext können Sie dann 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 oben genannte Lösung bei Ihnen nicht funktioniert hat, können Sie sie verwenden import { withRouter } from 'react-router-dom';

Mit dieser Option 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>