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

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?

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.

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 .

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);

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.