Estoy tratando de migrar el antiguo código dom del enrutador de reacción a v6 y quiero saber cómo escuchar el cambio de ruta, ahora estoy usando useHistory
const history = useHistory() //then history.listen(...) Leí los documentos nuevos y descubrí que useHistory se cambió a useNavigate
const navigate = useNavigate() //then navigate.listen(...) // listen is not a function¿Pueden ayudarme a encontrar una manera de escuchar el cambio de ruta en v6?
// This is a React Router v6 app import { useNavigate } from "react-router-dom"; function App() { let navigate = useNavigate(); function handleClick() { navigate("/home"); } return ( <div> <button onClick={handleClick}>go home</button> </div> ); }La función de navigate es una función, no un objeto como el objeto de history de la versión 5 de react-router-dom anterior.
Todavía puede crear un objeto de history personalizado, pero deberá crear un enrutador personalizado para usarlo. Esto le permite importar su objeto de history y crear oyentes.
Cree un ejemplo de enrutador personalizado, use uno de los enrutadores de nivel superior como ejemplo de cómo administran la ubicación y el estado, es decir, BrowserRouter :
const CustomRouter = ({ history, ...props }) => { const [state, setState] = useState({ action: history.action, location: history.location }); useLayoutEffect(() => history.listen(setState), [history]); return ( <Router {...props} location={state.location} navigationType={state.action} navigator={history} /> ); }; En su código, cree el objeto de history personalizado para que lo use su nuevo enrutador personalizado y otros componentes.
const history = createBrowserHistory(); export default history;Use su enrutador y pásele su objeto de historial.
import CustomRouter from '../CustomRouter'; import history from '../myHistory'; ... <CustomRouter history={history}> .... </CustomRouter> En un componente en el que desea escuchar los cambios de ubicación, importe su objeto de historial e invoque la devolución de llamada de listen como lo hizo anteriormente.
import history from '../myHistory'; ... useEffect(() => { const unlisten = history.listen((location, action) => { // ... logic }); return unlisten; }, []); Si lo desea, también puede crear su propio useHistory personalizado que simplemente devuelve su objeto de historial.