Tengo un componente de reacción con la siguiente función.
const handleNavigate = (clientId) => { console.log(clientId) navigate(`/dashboard/clients/${clientId}`) } El console.log() muestra la ID que quiero agregar para usar en la función de navegación.
Y
La URL en el navegador se está actualizando.
Pero la página no cambia.
Esto funciona para navegar desde /dashboard/clients a /dashboard/clients/foo
pero no funciona para navegar desde /dashboard/clients/foo a /dashboard/clients/bar
El ID de cliente se pasa a la tarjeta así...
const CompanyCard = (props) => { const { client, showWatchlist, removeDisabled, showRemove, removeType } = props ... }entonces en la tarjeta
<CardActionArea onClick={() => handleNavigate(client._id)} ... ¿Algunas ideas?
Gracias
Después de leer la sugerencia de @redapollos probé Outlet y el
useRoutes métodos... ninguno funcionó.
import { useRoutes } from 'react-router-dom' // then in the routes... { path: 'clientdetail/:id', element: <ClientDetail /> }, { path: 'clientdetail/', element: <ClientDetail /> }, Esto podría deberse al uso del useRoutes , pero todavía estoy trabajando en ello.
Otra pregunta aquí en SO que podría obtener una respuesta antes: https://stackoverflow.com/a/70009104/13078911
navigate('/url') navigate(0) ¡Después de reemplazar la URL, llamar manualmente a navigate(0) actualizará la página automáticamente!
Esto funcionará en una situación como navegar desde /same_path/foo a /same_path/bar .
Para una situación normal, como navegar desde /home a /same_path/bar , navigate(0) hará que la página se actualice incluso después de que la página haya terminado de renderizarse. Y para evitarlo, puedes echar un vistazo a esta pregunta .
Intente reemplazar la URL en lugar de agregar una nueva. cuando va de /dashboard/clients a /dashboard/clients/foo , va de padre a hijo, su URL tiene todo más /foo . Pero, cuando va de /dashboard/clients/foo a /dashboard/clients/bar , está navegando a un hermano /foo a /bar que podría estar causando el problema. intente reemplazar el valor como navigate(/dashboard/clients/ba, {replace: true}) aquí hay un ejemplo de cómo usar esto en general. utilícelo para obtener más información. https://www.digitalocean.com/community/tutorials/react-react-router-v6
Tuve este mismo problema y mi código estaba bien, sin embargo, descubrí en esta publicación que los parámetros opcionales no son compatibles con v6.
https://github.com/remix-run/react-router/issues/7285
Yo Tuve:
<Routes> <Route path="list/:id?" element={<SystemList />} /> </Routes>y tuve que cambiarlo a:
<Routes> <Route path="list/:id" element={<SystemList />} /> <Route path="list/" element={<SystemList />} /> </Routes>Espero que lo soporten en el futuro, pero a partir de la v6.0.2 no lo hacen.