I have a react component with the following function
const handleNavigate = (clientId) => {
console.log(clientId)
navigate(`/dashboard/clients/${clientId}`)
}
The console.log() is showing the ID I want to append to use in the navigate function.
AND
The URL in the browser is updating.
But the page does not change.
This works to navigate from /dashboard/clients to /dashboard/clients/foo
but it does not work to navigate from /dashboard/clients/foo to /dashboard/clients/bar
The clientId is passed into the card like so...
const CompanyCard = (props) => {
const { client, showWatchlist, removeDisabled, showRemove, removeType } = props
...
}
then in the card
<CardActionArea
onClick={() => handleNavigate(client._id)}
...
Any ideas?
Thanks
After reading up from @redapollos suggestion I tried Outlet and the
useRoutes methods... neither worked.
import { useRoutes } from 'react-router-dom'
// then in the routes...
{ path: 'clientdetail/:id', element: <ClientDetail /> },
{ path: 'clientdetail/', element: <ClientDetail /> },
This might be due to using the useRoutes hook but I am still working on it.
Another question here on SO that might get an answer sooner - https://stackoverflow.com/a/70009104/13078911
navigate('/url')
navigate(0)
After replacing the url, manually calling navigate(0) will refresh the page automatically!
This will work in a situation like
navigate from /same_path/foo to /same_path/bar.
For a normal situation like navigate from /home to /same_path/bar, navigate(0) will cause page to refresh even after page has finished rendering. And to prevent that, you can take a look at this question.
Try replacing the URL instead of adding a new one. when you are going from
/dashboard/clients to /dashboard/clients/foo you are going from a parent to a child, your URL has everything plus /foo. But, when you are going from /dashboard/clients/foo to /dashboard/clients/bar you are navigating to a sibling /foo to /bar that might be causing the issue. try to replace the value like navigate(/dashboard/clients/ba, {replace: true}) here is example of how to use this in general. use it for more information. https://www.digitalocean.com/community/tutorials/react-react-router-v6
I had this same issue and my code was fine, however, I found out at this post that optional params aren't supported in v6.
https://github.com/remix-run/react-router/issues/7285
I had:
<Routes>
<Route path="list/:id?" element={<SystemList />} />
</Routes>
and had to change it to:
<Routes>
<Route path="list/:id" element={<SystemList />} />
<Route path="list/" element={<SystemList />} />
</Routes>
I'm hoping they support it in the future but as of v6.0.2 they do not.