Global navigation outside of React components

[Mikilll94]

Would be nice to have the ability to perform global navigation outside of React components.

I.e. quite a common use case in web apps is redirecting to /unauthorized page when you receive 403 error code from server for any request. Unfortunately it seems like this library does not allow to navigate in axios interceptors.

[sergiodxa]

If you're using data mode, you can import the result of createBrowserRouter or similar functions, then do router.navigate(path).

If you're using framework mode, it will depend if you're doing your fetch server-side. Since the server needs to send a redirect response to navigate the user, you need to use redirect(path) to tell the browser to do a navigation, inside an axios interceptor you should throw a redirect so the execution stops there and if nothing catch the thrown redirect it will reach the browser

[Mikilll94]

@sergiodxa Thanks for your answer.

Unfortunately when you use router.navigate(path) in your helper functions in the api layer, then you will encounter circular dependencies in Vite. Circular dependencies in Vite breaks HMR (Hot Module Replacement). Do you know how to fix this issue?