Anteriormente usé React Router DOM v4 y lo siguiente:
componentDidUpdate(prevProps) { if ((prevProps.match.params[0] !== this.props.match.params[0])) { ...some code } } componentDidUpdate(prevProps) { if (this.props.location.pathname !== prevProps.location.pathname){ this.loadContent(); } }¿Cómo debo reemplazarlos en el v6?
Use el gancho useEffect con dependencia para reemplazar componentDidUpdate y los ganchos useLocation y useParams para reemplazar la location y hacer match los accesorios.
Ejemplo:
import { useEffect } from 'react'; import { useLocation, useParams } from 'react-router-dom'; ... const{ pathname } = useLocation(); const {/* destructured param */} = useParams(); useEffect(() => { loadContent(); }, [pathname]); useEffect(() => { ...some code }, [/* destructured param */]); Si su pregunta es realmente sobre cómo usar los ganchos react-router-dom@6 con un componente de clase más antiguo, entonces deberá crear un componente de orden superior personalizado para usar los ganchos e inyectar los accesorios.
Ejemplo:
import { useLocation, useParams, /* other hooks */ } from 'react-router-dom'; const withRouter = Component => props => { const location = useLocation(); const params = useParams(); // other hooks return ( <Component {...props} {...{ location, params, /* other hook props */ }} /> ); }; export default withRouter; Luego puede decorar su componente de clase y usar los métodos de ciclo de vida de componentDidUpdate y acceder a this.props.location y this.props.params . Tenga en cuenta que ahora no hay un accesorio de match , por ejemplo, this.props.match.params ahora es solo this.props.params .