Routes internationalization

[igortas]

Hi,

I like to ask, it is possible to internationalize routes names.

I don't like to have routes like /en/post, or /fr/post
But routes like this: /post for english, or /publier for french.

Is this possible, with some script on the fly before app is running? This is real case scenario, just like to know, if I can benefit from this kind of option if is available or done in some future version.

Some configuration like:

{ "beforeStart": { "fr": { "post": "publier" } } }
Based on some lang env provided.

BR,

[sergiodxa]

Right now, you need to stop using the routes folder and instead use the routes function inside the remix.config.js file

See https://remix.run/docs/en/v1/api/conventions#routes

[zipme]

Hi there! I'm working on a website with multiple domains, where each domain is associated with a different locale. For example, www.example.com is in English and www.example.fr is in French. I'd like to have both www.example.com/post and www.example.fr/publier point toroutes/post.tsx. Can someone please help me figure out how to achieve this using remix.config's routes config? Or do I need to have multiple deployments/instances for each locale? Thank you for your help!

[zipme]

What if define multiple paths pointing to the same route:

route("/post", "post.tsx");
route("/publier", "post.tsx");

Then in post.tsx we'd do some validation, for example, respond with 404 status code when user is visiting www.example.fr/post

[sergiodxa]

That should, but you will have to remember to check if the path is post only allow if locale is English, if the path is publier only allow for French and that on every route for each locale and segment pair.

[zipme]

@sergiodxa unfortunately, the above approach would result in this error Unable to define routes with duplicate route id: "post" 🥲

[zipme]

related: remix-run/remix#1898 (comment)

[zipme]

Just saw that we can now pass the id to avoid the error:

module.exports = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  devServerPort: 8002,
  publicPath: "/build/",
  serverBuildDirectory: "build",
  ignoredRouteFiles: [".*"],
  routes(defineRoutes) {
    return defineRoutes(route => {
      route("/user/:id", "routes/index.tsx", { id: "user-by-id" });
      route("/user", "routes/index.tsx");
    });
  }
};

[eliawk]

Hello @sergiodxa,
for this project I'm working on I've implemented a hybrid approach. all the english routes are created using the routes folder, then in the remix.config I've map the translations for those routes.
Now the routing it's working fine.
I've then created a hook called useLocalizeLink to use a function const { l } = useLocalizeLink().
In this way all the links are localized passing the original path, but just client side.
How could I do to make the same think you do in your plugin to "translate" the links also server side?