distinguished-scarlet•3y ago

How to navigate immediately to another route?

Hi everyone, after login (localhost:5173/login) the user is redirected to localhost:5137, but I want when the user reaches that route (localhost:5173) to be redirected to localhost:5173/myCustomRoute. How can I do it?

4 Replies

kapa.ai•3y ago

Hi @raulcruztorres. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the redirectTo property in the login method of your authProvider. When the login is successful, you can resolve the promise with an object that has the redirectTo property set to your custom route. Here's an example:

const authProvider: AuthBindings = {  
 // ---  
 login: async () => {  
 // ---  
 return {  
 success: true,  
 redirectTo: "/myCustomRoute",  
 };  
 },  
};

const authProvider: AuthBindings = {  
 // ---  
 login: async () => {  
 // ---  
 return {  
 success: true,  
 redirectTo: "/myCustomRoute",  
 };  
 },  
};

This will redirect the user to localhost:5173/myCustomRoute after a successful login. You can also use the useLogin hook's mutation function to specify a custom redirect path:

const { mutate: login } = useLogin();  
  
login({ redirectPath: "/myCustomRoute" });

const { mutate: login } = useLogin();  
  
login({ redirectPath: "/myCustomRoute" });

Then, you can handle this URL in your login method of the authProvider:

const authProvider: AuthBindings = {  
 // ---  
 login: async ({ redirectPath }) => {  
 // ---  
 return {  
 success: true,  
 redirectTo: redirectPath,  
 };  
 },  
};

const authProvider: AuthBindings = {  
 // ---  
 login: async ({ redirectPath }) => {  
 // ---  
 return {  
 success: true,  
 redirectTo: redirectPath,  
 };  
 },  
};

This will redirect the user to the specified redirectPath after a successful login. For more information, you can refer to the useLogin documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useLogin/) and AuthProvider documentation (https://refine.dev/docs/api-reference/core/providers/auth-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

<@367778590974148608> kapa.ai is still learning and improving, please let us know how it did by reacting below

distinguished-scarletOP•3y ago

I would like to solve it by indicating the desired behavior in the react-router-dom routes

continuing-cyan•3y ago

Hello @raulcruztorres you can use NavigateToResource component for that: https://refine.dev/docs/packages/documentation/routers/react-router-v6/#navigatetoresource

React Router v6 | refine

refine provides router bindings and utilities for React Router v6. It is built on top of the react-router-dom package. This package will provide easy integration between refine and react-router-dom for both existing projects and new projects.

How to navigate immediately to another route?

Did you find this page helpful?