[SOLVED] Multiple routes for one component

Multiple routes for one component

I have a React router version 7^, app with in framework mode (It was a Remix 2 app that I upgraded to React router). Now I'd like to have a page with a loader and an action to be on two different paths? I'm trying something like this:

export default [
    route("/name1", "./routes/MyPage.tsx"),
    route("/name2", "./routes/MyPage.tsx"),
] satisfies RouteConfig;

But it seems this way is not supported. Is there a simple way to achieve this?

Solution

In Framework mode, route() expects file paths to be unique — and if you specify the same file twice, it won't work properly (Remix or React Router won't handle duplicate files well).

Solution:

Option 1: Create an intermediate route file to “alias” (redirect or re-render)

routes/name1.tsx

export { loader, action } from "./MyPage";
export { default } from "./MyPage";

routes/name2.tsx

export { loader, action } from "./MyPage";
export { default } from "./MyPage";

Option 2: Use a redirect (if you only need one canonical URL)

// routes/name2.tsx
import { redirect } from "@remix-run/node";

export function loader() {
  return redirect("/name1");
}