Tengo una aplicación de reacción con dos páginas: la página de inicio y la de viaje. La página de viaje se representa con el ID de viaje pasado a través de la URL. Mi app.js se parece a:
function App() { return (<> <ThemeProvider theme={theme}> <Router> <Routes> <Route exact path='/' element={<Home />} /> <Route path='/trip/:tripId' element={<TripComponent />} /> </Routes> </Router> </ThemeProvider> </> ); } Tengo una barra de navegación global con un menú de diferentes tripIds como muchos Link para navegar al TripComponent. Cuando estoy en la ruta "/" y navego a "/trip/tripA" , no tengo problemas. Pero cuando estoy en "/trip/tripA" y quiero navegar a "/trip/tripB" , no funciona. Puedo ver que la URL cambia en consecuencia, pero mi TripComponent no se vuelve a procesar con los datos de tripB. el código de mi menú en mi barra de navegación se ve así:
ReactDOM.createPortal(<> <CustomModal setOpen={setShowTripList} title={"Saved Trips"}> <List> {trips && trips.length > 0 && trips.map((trip, index) => { return ( <Link to={`/trip/${trip._id}`} > <ListItemButton> <ListItemText id={trip._id} primary={trip.title} /> </ListItemButton> </Link> ) }) } </List> </CustomModal> </> , document.getElementById("portal")) Estoy confundido en cuanto a por qué sucede esto. Cuando presiono el Link para navegar a otra URL, ¿no debería desmontar y volver a montar?
Cuando el parámetro de ruta de ruta tripId se actualiza, el elemento enrutado TripComponent no se vuelve a montar, solo se vuelve a representar. Si hay alguna lógica que depende del parámetro de ruta tripId , entonces TripComponent necesita "escuchar" los cambios en ese valor. Esto es lo mismo que tendría que suceder si cambiara el valor de una propiedad.
Use un useEffect con una dependencia en el parámetro de ruta tripId para generar efectos secundarios basados en el valor actual.
Ejemplo:
import { useParams } from 'react-router-dom'; ... const TripComponent = () => { const { tripId } = useParams(); useEffect(() => { // initial render or tripId updated // do something with current tripId value }, [tripId]); ... };Creo que la respuesta de @Drew es perfecta. Pero me gustaría poner algo adicional.
Le sugiero que use el gancho useMemo.
... const trip = useMemo(() => { // something you want }, [tripId]) ...