[v6] [Feature]: Use Navigate outside from render component

[ynhhoJ]

What is the new or updated feature that you are suggesting?

According to the docs: https://github.com/remix-run/react-router/blob/dev/docs/api-reference.md#Navigate
At this moment it's possible to use Navigate only in render component.

Why should this feature be included?

Implement history.push like function, to change route location from outside.

[timdorr]

You're looking for useNavigate: https://github.com/remix-run/react-router/blob/dev/docs/api-reference.md#usenavigate

[ynhhoJ]

@timdorr , what about class component or using route changing from third-party functions?

For example, i'm using xstate machine and the routes are controlled by states, using v6, i can't change route path from "outside"

[textbook]

@timdorr as another example of navigating from outside a component, image you want to have a single place where 401 response status codes from the backend send the user back to the home page. You could have a hook that gives you a client (fetch, axios, whatever) with access to navigate, but then the transport-level logic is bleeding into the view-level components rather than being isolated into its own layer.

The method I've with v5 is, rather than e.g.:

ReactDOM.render(
	<BrowserRouter>
		<App />
	</BrowserRouter>,
	document.getElementById("root")
);

create my own, which exposes the history so I can history.push("/"); to achieve the above functionality:

const history = createBrowserHistory();

ReactDOM.render(
	<Router history={history}>
		<App />
	</Router>,
	document.getElementById("root")
);

(This has to be updated slightly for v6 anyway, see https://stackoverflow.com/q/69859509/3001761.)