Wofür ist withRouter in React-Router-Dom?


107

Ich habe manchmal Leute gesehen , die ihre Komponenten eingewickelt haben, withRouterwenn sie sie exportierten:

import { withRouter } from 'react-router-dom';

class Foo extends React.Component {
  // ...
}

export default withRouter(Foo);

Wofür ist das und wann soll ich es verwenden?

Antworten:


182

Wenn Sie eine Hauptseitenkomponente in Ihre App aufnehmen, wird diese häufig in eine <Route>Komponente wie die folgende eingeschlossen:

<Route path="/movies" component={MoviesIndex} />

Auf diese Weise hat die MoviesIndexKomponente Zugriff auf, this.props.historysodass sie den Benutzer mit umleiten kann this.props.history.push.

Einige Komponenten (normalerweise eine Header-Komponente) werden auf jeder Seite angezeigt und sind daher nicht in Folgendes eingeschlossen <Route>:

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

Dies bedeutet, dass der Header den Benutzer nicht umleiten kann.

Um dieses Problem zu umgehen, kann die Header-Komponente withRouterentweder beim Export in eine Funktion eingeschlossen werden:

export default withRouter(Header)

Dadurch erhält die HeaderKomponente Zugriff auf this.props.history, sodass der Header den Benutzer jetzt umleiten kann.


26
Wie in der Antwort von @ msoliman angegeben , withRoutergibt es auch Zugriff auf matchund location. Es wäre schön, wenn die akzeptierte Antwort dies erwähnen würde, da die Weiterleitung des Benutzers nicht der einzige Anwendungsfall für ist withRouter. Dies ist ansonsten eine nette Selbst-Qna.
Michael Yaworski

Wenn Sie den <Link> und <NavLink> vom Router benötigen, müssen Sie den withRouter-HOC verwenden.
Thewebjackal

Ich denke, die Antwort wäre vollständiger, wenn erwähnt würde, warum historyoder matchnicht standardmäßig vorhanden sind. dh warum withRoutersollte ausdrücklich erwähnt werden?
Emran BatmanGhelich

43

withRouterist eine Komponente höherer Ordnung , die bei jedem Rendern die nächstgelegenen Routen match, aktuellen locationund historyRequisiten an die umschlossene Komponente weiterleitet. Es verbindet einfach die Komponente mit dem Router.

Nicht alle Komponenten, insbesondere die gemeinsam genutzten Komponenten, haben Zugriff auf die Requisiten eines solchen Routers. Innerhalb der verpackten Komponenten können Sie auf locationRequisiten zugreifen und weitere Informationen erhalten location.pathnameoder den Benutzer mithilfe einer anderen URL umleiten this.props.history.push.

Hier ist ein vollständiges Beispiel von ihrer Github-Seite:

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation 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>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

Weitere Informationen finden Sie hier .


6

withRouterMit einer Komponente höherer Ordnung können Sie auf historydie Eigenschaften des Objekts und die <Route>Übereinstimmung der nächsten zugreifen . withRoutervergehen aktualisiert match, locationund historyRequisiten , um die eingewickelt Komponente , wenn es macht.

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation 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>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);


0

withRouter ist eine Komponente höherer Ordnung, die die nächstgelegenen Routen passiert, um Zugriff auf eine Eigenschaft hinsichtlich des Standorts und der Übereinstimmung von den Requisiten zu erhalten. Auf sie kann nur zugegriffen werden, wenn der Komponente die in der Komponente befindliche Eigenschaft zugewiesen wird

<Route to="/app" component={helo} history ={history} />

und ebenso die Übereinstimmung und der Wohlstand des Standorts, um den Standort ändern zu können und this.props.history.push zu verwenden. Es sollte für jede Komponenteneigenschaft bereitgestellt werden, die bereitgestellt werden muss. Bei Verwendung von WithRouter kann jedoch auf Standort und Übereinstimmung zugegriffen werden, ohne dass der Eigenschaftsverlauf hinzugefügt wird Auf die Richtung kann zugegriffen werden, ohne dass für jede Route ein Eigenschaftsverlauf hinzugefügt werden muss.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.