[Docs]: Programmatic redirect example

[zoonman]

Describe what's incorrect/missing in the documentation

Sometimes it is required to programmatically control state of application router.
For example, external events driven by timer or websockets event might force loading of different route.
This actual for various monitoring applications. E.g. security camera interfaces with object/event detection etc.
Usually this code lives outside of components in a service layer and requires some kind of forceful redirect. Which we can always use history.pushState it doesn't seems like an elegant solution.
Ideally it would be nice to have something like

import { navigate } from "react-router-dom";
// ...
// in some event handler
navigate('/my/url/', someStateParams);

[timdorr]

You can do this inside of a useEffect inside one of your components. There are examples in the docs already: https://reactrouter.com/en/main/start/concepts#navigate-function

[zoonman]

I need to do it in a service layer. This is why I opened the ticket and explained why.

[zoonman]

/reopen

[rsmelo92]

This is also useful for the project Im working! We need to access from outside react and trigger a react component depending on the route that we navigated. We got to do it on later version by calling router.navigate which has a huge warning. Everything was ok, but now this is async and breaks some logic 😢

is there any other way that is not private and prob will change on later versions?

[rsmelo92]

hard to find but heres an answer, I wish I found it earlier before figuring out by myself 😅
#9422 (comment)

[sergioavazquez]

@rsmelo92 I wouldn't use that approach unless you're trying stuff out, working on a proof of concept or a hobby. They're not really planning on maintaining it: https://reactrouter.com/en/6.4.0-pre.14/routers/history-router

[sergioavazquez]

Can we re-open this ticket? I've been waiting a for a stable, long term solution for this issue for at least a year.