yammering-amber
yammering-amber8mo 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
kapa.ai8mo 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
kapa.ai8mo ago
<@367778590974148608> kapa.ai is still learning and improving, please let us know how it did by reacting below
yammering-amber
yammering-amber8mo ago
I would like to solve it by indicating the desired behavior in the react-router-dom routes
correct-apricot
correct-apricot8mo 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.