Do czego służy withRouter w react-router-dom?

withRouter jest komponentem wyższego rzędu, który przechodzi przez właściwości match, current location i history do zawiniętego komponentu za każdym razem, gdy jest renderowany. po prostu łączy komponent z routerem.

Nie wszystkie komponenty, zwłaszcza współdzielone komponenty, będą miały dostęp do rekwizytów takiego routera. Wewnątrz zawiniętych komponentów można uzyskać dostęp do location prop i uzyskać więcej informacji, takich jak location.pathname lub przekierować użytkownika do innego adresu URL za pomocą this.props.history.push.

Oto kompletny przykład ze strony github:

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

Więcej informacji można znaleźć tutaj .

withRouter komponent wyższego rzędu pozwala uzyskać dostęp do Właściwości obiektu history i najbliższego dopasowania <Route>. withRouter przejdzie zaktualizowany match, location, i history rekwizyty do zawiniętego komponentu za każdym razem, gdy renderuje.

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 jest komponentem wyższego rzędu, który przejdzie przez najbliższą trasę, aby uzyskać dostęp do właściwości co do lokalizacji i dopasować z właściwości, do których można uzyskać dostęp tylko wtedy, gdy nada komponentowi właściwość znajdującą się w komponencie

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

I tak samo mecz i lokacja, aby móc zmienić lokację i użyć tego.rekwizyty.historia.push powinien być dostarczony dla każdej właściwości komponentu, ale gdy jest używany z routerem, może to być dostęp do lokalizacji i dopasowanie bez dodawania historii właściwości można uzyskać dostęp do kierunku bez dodawania historii właściwości dla każdej trasy.