Can we have a method to redirect routes outside a react context or a loader/action ?

[JacobZyy]

I encapsulated a fetch request function to handle some common Error catch & throw.

and one is Error 401, user has no authority.

in this way, I need to Toast and redirect to login page.

my code follows:

 class Fetch {
   private async httpFactory<T>(props: RequestProps): Promise<ResponseType<T>> {
    try {
      const res = await fetch(...)
			return res
    }
    catch (error) {
      throw this.errorHandler(error)
    }
  }
  private errorHandler(error: unknown) {
    if (error instanceof ApiAuthenticationError) {
      authorization.removeToken()
  		resetAllStores()
      redirect('/login')
    }
		//	...other error handler
  }
}

I read the document and find redirect is only usefull in a loader or action

and useNavigate is only usefull in a react context.

so I try the history.pushState(),

 history.pushState(null, '', `${location.origin}/login`)

which can change the url but page is not changed. and no loader is executed

So, I want this method, a redirect function which can be used outside a react context and loader & action.

[brophdawg11]

If you need to navigate outside the react tree, you can use the router.navigate(path, opts) method on the router instance you create via createBrowserRouter