I just want to redirect one path to another.
If I have something like this in my routes.ts:
export default [
index("Home.tsx"),
route("/about", "About.tsx"),
] satisfies RouteConfig;
How do I say I want to redirect "/info"
back to "/about"
. I was expecting to add a line like:
redirect("/info", "/about"),
But the documentation seems very quiet about such things.
Any ideas?
A redirect
is something you would return from a route loader or action, it's a Response
object. There is no route config function to call to handle redirecting directly, but you can create a route component that uses a loader to initiate the redirection.
Create an "Info" route component file that exports only a route loader function.
Info.tsx
import { redirect } from "react-router";
export const clientLoader = () => { // or `loader` to load server-side
return redirect("/about");
};
Add a route for "/info"
that loads the above Info.tsx file. The loader will run and initiate the redirection to the "/about"
route path.
export default [
index("Home.tsx"),
route("/about", "About.tsx"),
route("/info", "Info.tsx"),
] satisfies RouteConfig;
For more complete details see: