1. Introducción
En React, withRouter es un componente de orden superior (HOC), que puede empaquetar componentes que no son componentes de enrutamiento en componentes de enrutamiento y pasar información de enrutamiento en accesorios.
El uso de withRouter permite que un componente que Route no representa directamente acceda a parámetros relacionados con el enrutamiento (como coincidencias, ubicación, historial, etc.), lo que facilita el control del enrutamiento.
2. Casos
En un componente que Route no representa directamente, si necesita implementar la operación de salto de ruta mediante programación, puede usar withRouter para envolver el componente, luego obtener el objeto histórico de los accesorios y usar push, replace, go, etc. proporcionado por él Método para implementar el salto.
import {
withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/somepath');
}
render() {
// ...
}
}
export default withRouter(MyComponent);
2. Precaución
Tenga en cuenta los siguientes puntos cuando utilice withRouter para envolver componentes:
1.withRouter debe usarse como el componente del paquete más externo; de lo contrario, es posible que no se obtenga la información de enrutamiento.
2.withRouter hará que se pierda el atributo props del componente original, es decir, solo se heredarán los atributos relacionados con el enrutamiento, por lo que se recomienda declarar otros atributos requeridos dentro del componente.
3. Al empaquetar un componente, debe exportarlo mediante exportación; de lo contrario, el componente empaquetado no se puede introducir en otros archivos.
Blog personal: notas de estudio para el resto de mi vida.