[Bug]: What's the updated way to navigate outside React Components?

[nitzanma]

What version of React Router are you using?

migration to 6.22

Steps to Reproduce

Hello ,
I went through all documentation of migrating from v5 to v6, with "react-router-dom-v5-compat" library.
(here: #8753)
All went all, and I kept testing and checking everything still works all the way.

Expected Behavior

After removing compat lib, history lib and installing v6 - everything will work.

Actual Behavior

The step where things start failing is when deleting the compat lib and installing v6.

The reason for failure - nothing was said about how do we navigate outside React Components.
at first I deleted history lib as you said in the migration guide, but afterwards returned it, because I saw in the community couple of workarounds that are still using this lib.

and still - none of the community solutions worked for me (in what I found here nor in StackOverflow).

Please help me out here, I'm struggling with this migration for too long.
I really want it to success.

I need the ability to navigate at my Root Store (Mobx model layer in my case) already, and change navigations according to server state that changes.
currently working on React v17 (planning to migrate to v18 soon, if it's relevant somehow)

Will be most thankful for any help!

[brophdawg11]

It depends on what APIs you are using (BrowserRouter, unstable_HistoryRouter, RouterProvider, etc.)

There's an explanation of your options in #9422 (comment) and #9422 (comment) but the recommendation would be to get to RouterProvider and use router.navigate. Please note the second linked comment there on how you can very easily nest your app in a RouterProvider splat route to enable the usage of router.navigate

[nitzanma]

It depends on what APIs you are using (BrowserRouter, unstable_HistoryRouter, RouterProvider, etc.)

There's an explanation of your options in #9422 (comment) and #9422 (comment) but the recommendation would be to get to RouterProvider and use router.navigate. Please note the second linked comment there on how you can very easily nest your app in a RouterProvider splat route to enable the usage of router.navigate

Hi, thanks a lot for your response.
It did help me to make a big progress!

One question I have - router object, that now I should be able to use it in my stores - How do I navigate with an addition of search params?
I manage to navigate to simple routes with router.navigate(....)
but couldn't understand how to add search params.

second question - in this migration branch, since updated everything (including turning class components to function component), there's a case I couldn't figure out yet, where a routing happening twice, in a way that the element to render looks as if it completely renders twice immediately.
This causes duplicate server calls, while the second one is, of course, not needed, and results in popping an error.
any idea why this is happening maybe?

[brophdawg11]

How do I navigate with an addition of search params?

You can just include them in the paramter:

router.navigate('/path?a=1&b=2')

completely renders twice immediately

This sounds like a StrictMode issue to me - in which case it would be dev-only. You could try moving the server API call to a loader to decouple it from the rendering cycle.

[nitzanma]

How do I navigate with an addition of search params?

You can just include them in the paramter:

router.navigate('/path?a=1&b=2')

completely renders twice immediately

This sounds like a StrictMode issue to me - in which case it would be dev-only. You could try moving the server API call to a loader to decouple it from the rendering cycle.

Again, many thanks. You helped a lot with these 2 comments and it seems like upgrading was finally completed!

Warm suggestions for adding the RouterProvider solution to the official migration document.