React Router v6 useNavigate() doesn't navigate if replacing last element in path

Question

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

UPDATE

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

@programandoconro - does that help? i can verify that the console.log(clientId) part is logging the desired information (the clientId I want to navigate to) — Ax0n
– Ax0n, Commented Aug 18, 2021 at 2:52

Enfield Li · Accepted Answer · 2022-07-13 05:47:47Z

27

Workable solution!

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.

Be aware of unintended page referesh behavior:

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.

More info:

edited Jul 13, 2022 at 5:47

answered Mar 28, 2022 at 3:22

Enfield Li

2,6201 gold badge15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zombani Over a year ago

Hello, I've tried and it worked, but because of reloading 2 times, when I click back on Browser, it's kind of weird like first back it ok, but the second back it shows the same page.

Alex Over a year ago

This workaround works for me and is great but I'm curious why we need to manually refresh with navigate(0)? Seems a little hacky and navigate('url') should work out of the box. FWIW I am unable to get the wrapper <Navigate> to work as well and I'm suspecting this is the reason. Perhaps there's a root cause specific to our applications that should be fixed?

anonymous programmer Over a year ago

In my case I was just going one step back, URL would change but the UI(view) stayed same or say used to become more messed up, I had to load the URL manually using window.location, using navigate(0) is a better work around for me, as I don't have to worry about loading the URL, which will change for Dev and Prod. Thanks Still have to find a solution for this!

Fredrik Meyer · Accepted Answer · 2023-03-17 05:45:21Z

22

I just read in React Router Dom Docs v6 this solution:

import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
<Button onClick={() => navigate('../user', { replace: true })}>Register</Button>

So, basically I added ../ before the route and the replace: true.
Reference: https://reactrouter.com/en/6.9.0/hooks/use-navigate

It worked for me, hope it works for u! (:

edited Mar 17, 2023 at 5:45

Fredrik Meyer

1452 silver badges9 bronze badges

answered Jun 20, 2022 at 13:20

Panda

2442 silver badges2 bronze badges

Comments

redapollos · Accepted Answer · 2021-12-04 00:50:30Z

4

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.

answered Dec 4, 2021 at 0:50

redapollos

1131 silver badge8 bronze badges

1 Comment

Ax0n Over a year ago

Good suggestion @redapollos - thank you. the issues link gave me an idea - I will post my learning here as soon as I can try it out.

C NASIR · Accepted Answer · 2021-08-18 03:19:51Z

3

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

answered Aug 18, 2021 at 3:19

C NASIR

1903 bronze badges

1 Comment

Ax0n Over a year ago

Thanks @C, unfortunately this does not have any effect. I think it makes sense that we wouldn't want to replace the current .../foo location in the history stack either way though. what if we wanted to navigate back to foo from bar?

FaFa · Accepted Answer · 2021-11-08 12:54:57Z

1

Maybe try the component Navigate:

<Navigate to={<your_path>}/>

answered Nov 8, 2021 at 12:54

FaFa

4285 silver badges24 bronze badges

Comments

akash · Accepted Answer · 2022-07-21 21:58:25Z

1

This might be a little late but I had the same issue and you simply just have to trigger a re-render for your component. You can do this by adding a useEffect hook within your component you have assigned /dashboard/clients/:clientId to with a dependency of the param you want to update.

It should look something like this:

import React, { useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom';


const ClientDashboard = () => {

    const params = useParams()
    const navigate = useNavigate()

    useEffect(() => {
    //do something with new id 
    },[params.clientId])

    const handleNavigate = (clientId) => {
        navigate(`/dashboard/clients/${clientId}`)
    }

    .....
}

Your page should now update with the new param

edited Jul 21, 2022 at 21:58

answered Jul 21, 2022 at 21:49

akash

112 bronze badges

Comments

Ebenezer · Accepted Answer · 2023-03-24 10:20:21Z

1

I'm using react-router-dom@^6.6.2

As of now I achieved using ../

navigate("../", {
      replace: true,
    });

answered Mar 24, 2023 at 10:20

Ebenezer

111 silver badge4 bronze badges

Comments

user29825846 · Accepted Answer · 2025-02-27 15:47:38Z

1

replace: true will remove the users ability to navigate back in history which Im guessing you might not want, if you just want to replace the entire path try:

navigate('../newpath')

this will remove the entire route using the .. and replace it with your new one.

answered Feb 27 at 15:47

user29825846

111 bronze badge

Comments

crispengari · Accepted Answer · 2021-08-18 06:19:02Z

0

I think this is a better work around on this one.

import React from 'react' 
import { useHistory } from 'react-router-dom' 
... 

const history = useHistory() 
const handleNavigate = (clientId) => {
        console.log(clientId)
        history.push(`/dashboard/clients/${clientId}`)
    }

Make sure your app is wrapped in a BrowserRouter from react-router-dom

answered Aug 18, 2021 at 6:19

crispengari

9,5518 gold badges59 silver badges69 bronze badges

1 Comment

Ax0n Over a year ago

Thanks Crispen, unfortunately v6 does not have the useHistory() hook. github.com/remix-run/react-router/issues/7476 - and even in the link you provided digitalocean.com/community/tutorials/…

Alfred Nelson · Accepted Answer · 2022-03-03 13:03:45Z

0

Try adding window-location as key prop to the element in route

ie

<Route path=":id" element={ <Hello key={window.location.pathname} } />

edited Mar 3, 2022 at 13:03

answered Mar 3, 2022 at 12:51

Alfred Nelson

12 bronze badges

1 Comment

Alfred Nelson Over a year ago

There was the same issue with v5 also . So, check. it might work. if you already solved it could you explain it too?

Darcio Santos · Accepted Answer · 2022-06-30 14:19:57Z

0

Based on this link https://github.com/remix-run/react-router/issues/8245 I could solve this issue.

I guess that as nothing has been changed the screen is not updated. As soon as I added I useEffect on the target route component and passed the lastelement as a parameter it worked.

In other words: On the target component add: Reac.useEffect(....) [lastElement].

edited Jun 30, 2022 at 14:19

answered Jun 30, 2022 at 14:18

Darcio Santos

12 bronze badges

1 Comment

Francisco Maria Calisto Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

React Router v6 useNavigate() doesn't navigate if replacing last element in path

UPDATE

11 Answers 11

Workable solution!

Be aware of unintended page referesh behavior:

More info:

3 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

11 Answers 11

Workable solution!

Be aware of unintended page referesh behavior:

More info:

3 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related