How to define multiple routes using the same component?

[juffalow]

I have a page that supports multiple languages and I wanted to have also translated routes. I tried:

export default [
  index('./routes/index.tsx'),
  route("en", "routes/home.tsx", [
    route('sign-in', 'routes/signIn.tsx'),
  ]),
  route("sk", "routes/home.tsx", [
    route('prihlasit-sa', 'routes/signIn.tsx'),
  ]),
] satisfies RouteConfig;

and also

export default [
  index('./routes/index.tsx'),
  ...prefix('en/', [
     route('sign-in', 'routes/signIn.tsx'),
  ]),
  ...prefix('sk/', [
     route('prihlasit-sa', 'routes/signIn.tsx'),
  ]),
] satisfies RouteConfig;

but both "solutions" throws error on start:

Error: Route config in "routes.ts" is invalid.
Error: Unable to define routes with duplicate route id: "routes/signIn"

Why is this a problem? Is there any workaround how to solve it? Thank you!

[juffalow]

If anyone gets this error, the workaround is to set the route ID:

import { type RouteConfig, index, route, prefix } from '@react-router/dev/routes';

export default [
  index('./routes/index.tsx'),
  ...prefix('en/', [
    index('routes/home.tsx', { id: 'en-home-index' }),
    route('sign-in', 'routes/signIn.tsx', { id: 'en-sign-in' }),
  ]),
  ...prefix('sk/', [
    index('routes/home.tsx', { id: 'sk-home-index' }),
    route('prihlasit-sa', 'routes/signIn.tsx', { id: 'sk-sign-in' }),
  ]),
] satisfies RouteConfig;