¿Para qué sirve withRouter en react-router-dom?

Te sugerimos que pruebes esta respuesta en un entorno controlado antes de pasarlo a producción, saludos.

Solución:

Cuando incluye un componente de página principal en su aplicación, a menudo está envuelto en un componente como este:

Al hacer esto, el MoviesIndex componente tiene acceso a this.props.history para que pueda redirigir al usuario con this.props.history.push.

Algunos componentes (comúnmente un componente de encabezado) aparecen en cada página, por lo que no están envueltos en un :

render() 
  return (
);

Esto significa que el encabezado no puede redirigir al usuario.

Para evitar este problema, el componente de encabezado se puede envolver en un withRouter función, ya sea cuando se exporta:

export default withRouter(Header)

esto da la Header acceso a componentes this.props.historylo que significa que el encabezado ahora puede redirigir al usuario.

withRouter es un componente de orden superior que pasará por la ruta más cercana matchActual locationy history props al componente envuelto cada vez que se renderiza. simplemente conecta el componente al enrutador.

No todos los componentes, especialmente los componentes compartidos, tendrán acceso a los accesorios de dicho enrutador. Dentro de sus componentes envueltos, podrá acceder location prop y obtener más información como location.pathname o redirigir al usuario a una URL diferente usando this.props.history.push.

Aquí hay un ejemplo completo de su página de 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 
You are now at location.pathname
;
  


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

Se puede encontrar más información aquí.

withRouter componente de orden superior le permite obtener acceso a la history propiedades del objeto y el más cercano partido de withRouter pasará actualizado match, locationy history props al componente envuelto cada vez que se renderiza.

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 
You are now at location.pathname
;
  


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

Reseñas y calificaciones del tutorial

Si estás contento con lo expuesto, tienes la habilidad dejar un enunciado acerca de qué te ha gustado de esta noticia.

---

---

Utiliza Nuestro Buscador