How to navigate outside of the React tree?

[tokarchyn]

It seems Router does not contain navigate function anymore as state in docs: https://tanstack.com/router/v1/docs/guide/navigation#routernavigate

[hartmann-ace]

It seems Router does not contain navigate function anymore as state in docs: https://tanstack.com/router/v1/docs/guide/navigation#routernavigate

Until this is answered, do you know the last version where it is still included?

[Megahedron69]

Did you find any solution to this?

[tannerlinsley]

Use router.navigate or simply use the history.pushState/replaceState api. Tanner Linsley

…

On Apr 21, 2024 at 12:43 PM -0600, KarticJoshi ***@***.***>, wrote: Did you find any solution to this? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mmospanenko]

where to get router?

for example I have path and params - can I do redirect without react tree?

I know about getRouteApi, it requires router id and provides some hooks, but I think you're about another router object

[schiller-manuel]

you can import the router instance from whereever you run const router = createRouter(...)

[mmospanenko]

thanks, I implemented sharing this object with my utility layer. It works perfectly!)

[isaachinman]

@tannerlinsley If we use router.navigate directly, how can we get correct search param typing in there?

Edit: Same as the docs, just pass in from:

[oleksandr-danylchenko]

What would be a recommended option if I'd like to redirect the user on a network request failure?
The fetch wrapper is a module that can be used by descendant components. E.g.

export const baseQueryWithAuthCheck = (
	path: string,
	{ headers, userId, ...options }: ApiRequestOptions = {},
) => {
	...

	return fetch(`${API_HOST}${path}`, {
		...options,
		credentials: "include",
		headers: requestHeaders,
	}).then((response) => {
		if (response.status === 401 || response.status === 403) {
			void router.navigate({ to: "/login", replace: true });
		}

		return response;
	});
};

Unfortunately, importing the router from the main file will introduce import cycles and the ReferenceError: Cannot access '***' before initialization exceptions.

[oleksandr-danylchenko]

The option that kinda works is using a dynamic import of main.tsx file: const { router } = await import("#/main");

[tokarchyn]

I believe it's a different problem than what I was asking initially. I'm closing my question as it's not relevant anymore.