[I18N] Translating path segments

[AndrewLeedham]

I have been investigating the feasibility of using Remix for an upcoming project and have ran into a few issues around Internationalisation. Most if not all of the issues are mentioned here: #2877. However, I wanted to create a separate discussion specifically focused on translating URLs and path segments.

Goal

The goal here is to have a folder structure like:

./app/routes
└── :locale
    └── about.tsx

Then given we have 2 supported locales en-US and fr-FR, and en-US is the default, the following routes would be set up:

• /en-us/about would match routes/:locale/about.tsx
• /fr-fr/qui-sommes-nous would match routes/:locale/about.tsx
• /en-us/qui-sommes-nous would redirect to /en-us/about
• /fr-fr/about would redirect to /fr-fr/qui-sommes-nous

This would work for any number of path segment and should use the default locale when no translation exists. For example
/fr-fr/qui-sommes-nous/contact/map if we only have translations for about and map we would redirect to /fr-fr/qui-sommes-nous/contact/carte leaving contact as is assuming it is a valid route.

Attempted solutions

Reading through the Remix docs and playing around with a prototype I came across 2 potential solutions:

Rewriting req.url

req.url in Express can be changed as req.originalUrl keeps the actual request url, allowing routing to be customised. So we could rewrite it in middleware to the en-US version of the current request path. So for the 2nd example above we would rewrite it to /fr-fr/about after any redirecting. Remix can now route to the about.tsx as usual even though the url does not actually match.

This is specific to the Express adapter of course, but the main problem with this approach is that the client has no idea about the rewritten req.url, as it is using (I assume) window.location.href and we can't change that because it will redirect the page. So Remix throws a bunch of strange errors because there is no matching route.

Routes config option in remix.config.js

The routes option in remix.config.js allows you to define custom routes and point them at a module on the file system. However, it does not expose the current file based routes already registered. Meaning you cannot loop over the existing routes and add translated versions pointing to the same files. Furthermore, if you did have said route information it still doesn't work because of this bug: #1898

The closest I could get was using https://github.com/kiliman/remix-mount-routes which re-implements the file based route logic and writing some complicated mapping to duplicate routes with translations in any segment. Even then it wouldn't work because of the aforementioned bug.

Potential Solutions

There are likely lots of ways to solve this problem, here are a few thoughts I have had so far:

1. Expose the file based routes to the routes remix.config.js option and fix the duplicate file id bug. I am not sure this would scale overly well, as it would attempt to translate every possible path segment and create a lot of permutations.
2. Create a new route type, which has a translatable slug. Similar to path parameters like :id, it could be something like ~about and modules labelled as such could export a function with the available translations. Because this solution only flags some routes as translatable it reduces the amount of permutations and each route can handle its own translation sourcing like a loader does for data.
3. Have some sort of central slug translation, maybe something like a slugs option in remix.config.js which gets given a slug and returns translations for the available locales. Like the first option this would have to be run for every path segment so likely won't scale well.

To me option 2 seems like it would be the most remix-y option, so I will flesh out some pseudo code:

// app/routes/:locale/~about.tsx
import { useLoaderData } from "@remix-run/react";
import type { SlugFunction, LoaderFunction } from "@remix-run/node";
import translate from '../../helpers/translate';

export const slug: SlugFunction = async ({ slug, params }) => {
  const { locale } = params;
  return translate(slug, locale);
}

export const loader: LoaderFunction = async ({ params }) => {
  const { locale } = params;

  return {
    title: await translate('About Page', locale);
  }
}

export default function About() {
  const { title } = useLoaderData();

  return <h1>{title}</h1>;
}

[kiliman]

I'm actually working on adding support for route namespaces, which adds a prefix to the route ids. This will enable support for different paths mapping to the same route file. However, it will probably require patching remix core itself... I'm not 100% sure.

[AndrewLeedham]

Nice. I still feel this might have issues scaling, especially given my requirement of individual path segments being optionally translated. But definitely a nice API to achieve multiple routes against the same module.

[AndrewLeedham]

Actually thinking about this some more perhaps the opposite is true. The slug function proposal would require an async function to be run for every translatable route on every request. Whereas with the routes config all of that work is done at boot time, and it is just string matching on each request. 🤔

[AndrewLeedham]

@kiliman I think I have come around to the idea of using routes/defineRoutes to support translated segments, and your namespacing idea sounds great. Curious where you got with this?

Presumably the patch that Remix needs will involve custom IDs so you can prepend the namespace to make the translated routes unique? I had a go at trying to patch remix to support <path>|<file> for the IDs but it poses some issues, as it seems useMatches often relies on the ID of the route, so this would be a breaking change and likely confusing in that case. Also it seems to break some of the <Link to=""> logic :/

[kiliman]

I haven't gotten around the duplicate ID restriction, but did come up with a workaround. Basically it will create a stub file (stored in .cache/clone) that simply imports the original route file.

const fs = require("fs");
const path = require("path");

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  routes: async (defineRoutes) => {
    const routes = defineRoutes((route) => {
      cloneRoutes(route, routeConfig);
    });
    console.log(routes);
    return routes;
  },
};

const routeConfig = [
  {
    route: "/en-us/about",
    file: "routes/about.tsx",
  },
  {
    route: "/fr-fr/qui-somme-nous",
    file: "routes/about.tsx",
  },
];

function cloneRoutes(route, routeConfig) {
  routeConfig.forEach((entry) => {
    let pathname = entry.route;
    // strip leading /
    if (pathname.startsWith("/")) pathname = pathname.substring(1);
    const callback = entry.children
      ? () => cloneRoutes(route, entry.children)
      : undefined;
    cloneRoute(route, pathname, entry.file, callback);
  });
}

let parents = [];
function cloneRoute(route, pathname, file, callback) {
  const fileWithoutExt = path.basename(file, path.extname(file));
  const importPath = `~/${path.dirname(file)}/${fileWithoutExt}`;

  const parentPathname = parents.join("/");
  if (pathname.startsWith("/")) pathname = pathname.substring(1);
  const fullPathname = parentPathname
    ? parentPathname + "/" + pathname
    : pathname;
  const prefix = fullPathname.replace(/[/:]/g, "_");
  const cacheDir = ".cache/clone";
  const cachePath = path.resolve(
    cacheDir,
    `${prefix}_${file.replaceAll("/", "_")}`
  );
  if (!fs.existsSync(cacheDir)) {
    fs.mkdirSync(cacheDir);
  }
  const contents = `import Component from "${importPath}";
export * from "${importPath}";
export default Component;`;

  fs.writeFileSync(cachePath, contents, "utf-8");
  parents.push(pathname);
  route(pathname, cachePath, callback);
  parents.pop();
}

[AndrewLeedham]

Nice!

I think I am going to add a failing test PR for the defineRoutes issue and see if it gets any traction.

[florianchevallier]

I'm trying to do exactly the same (in french too :D)

Did you manage to do it "properly" ?

[AndrewLeedham]

@florianchevallier #3970 landed in 1.9.0 😄

[florianchevallier]

Nice indeed !

Out of curiosity, how did you handle the links into internal page ?

[AndrewLeedham]

Good question, haven't started a project with this yet, so haven't come across that issue yet. Just prototyped out a basic example.

[florianchevallier]

For now, what I've done is :

• create a routes.js file looking like this :

module.exports = [
  {
    id: 'about',
    path: 'main/about.tsx',
    lngs: [
      { id: 'nl', path: '/about' },
      { id: 'fr', path: '/a-propos' },
    ]
  },
  {
    id: 'home',
    path: 'main/_index.tsx',
    lngs: [
      { id: 'nl', path: '/' },
      { id: 'fr', path: '/' },
    ]
  },
  {
    id: 'product-hello',
    path: 'main/product.$param.hello.tsx',
    lngs: [
      { id: 'nl', path: '/product/:param/hello' },
      { id: 'fr', path: '/produit/:param/salut' },
    ]
  }
]

And a remix.config.js file like this :

const routeMapping = require('./routes');

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  routes(defineRoutes) {
    return defineRoutes((route) => {
      routeMapping.forEach(r => {
        r.lngs.forEach(lng => {
          console.log(`/${lng.id}${lng.path} =>`, r.path, { id: `${r.id}-${lng.id}` })
          route(`/${lng.id}${lng.path}`, r.path, { id: `${r.id}-${lng.id}`});
        })
      })
    });
  },
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

which produce theses routes :

/nl/about => main/about.tsx { id: 'about-nl' }
/fr/a-propos => main/about.tsx { id: 'about-fr' }
/nl/ => main/_index.tsx { id: 'home-nl' }
/fr/ => main/_index.tsx { id: 'home-fr' }
/nl/product/:param/hello => main/product.$param.hello.tsx { id: 'product-hello-nl' }
/fr/produit/:param/salut => main/product.$param.hello.tsx { id: 'product-hello-fr' }

Which is nice and working.

Then in the entry.server.ts, I did some logic to redirect to the "good" url if I come for the first time.
Which is good working, too.

But I'm struggling with the Links as it needs to be generated.
I think I'm going to create some custom component that will "translate" the urls but I feel ugly to do that 😅

[kiliman]

I would create a helper that uses the same routes.js file and returns the localized path for you. Something like:

const routes = [
  {
    id: "about",
    path: "main/about.tsx",
    lngs: [
      { id: "nl", path: "/about" },
      { id: "fr", path: "/a-propos" },
    ],
  },
  {
    id: "home",
    path: "main/_index.tsx",
    lngs: [
      { id: "nl", path: "/" },
      { id: "fr", path: "/" },
    ],
  },
  {
    id: "product-hello",
    path: "main/product.$param.hello.tsx",
    lngs: [
      { id: "nl", path: "/product/:param/hello" },
      { id: "fr", path: "/produit/:param/salut" },
    ],
  },
  {
    id: "product-hello2",
    path: "main/product.$category.$param.hello.tsx",
    lngs: [
      { id: "nl", path: "/product/:category/:param/hello" },
      { id: "fr", path: "/produit/:category/:param/salut" },
    ],
  },
];

function getLang() {
  return "fr";
}

export function getPath(id: string, params?: Record<string, string>) {
  const route = routes.find((route) => route.id === id);
  if (!route) return null;
  const lang = getLang();
  const pathByLang = route.lngs.find(({ id }) => id === lang);
  if (!pathByLang) return null;
  return pathByLang.path.replace(/(?::([^/]+))/g, (_match, name) => {
    return params?.[name] ?? "";
  });
}

console.log("about", getPath("about"));
console.log("home", getPath("home"));
console.log(
  "product-hello",
  getPath("product-hello", { param: "test-product" })
);
console.log(
  "product-hello2",
  getPath("product-hello2", { category: "books", param: "test-product" })
);

about /a-propos
home /
product-hello /produit/test-product/salut
product-hello2 /produit/books/test-product/salut

[kai23]

Yep, I did something similar but I used the generatePath from react-router to help for the transposing part.

If it can help somehow :

// --> /app/component/LocaleLink.tsx

import { Link } from "@remix-run/react";
import { generatePath } from "@remix-run/router";
import type { RemixLinkProps } from "@remix-run/react/dist/components";
import { useLocale } from "remix-i18next";
import routes from "~/routes";


function getLinkByRoute(linkRouteId: InternalRoutes, locale: string, params?: Object) {
  const route = routes.find((r) => r.id === linkRouteId);
  const localPath = route?.lngs.find(l => l.id === locale)?.path;
  if (route && localPath) {
    if (!params) {
      // Si la route n'a pas de param, c'est simple je la retourne directement
      return `/${locale}${localPath}`;
    }
    // Si par contre elle a des params, c'est moins simple.
    // Il faut que je fasse matcher les params "à la main"
    const path = generatePath(localPath, params);
    return `/${locale}${path}`;
  } else {
    throw new Error(`
      Impossible de trouver la route liée. Merci de vérifier les paramètres
      route: ${linkRouteId}
      locale: ${locale}
    `);
  }
}

type InternalRoutes = "about" | "product-hello";

interface LocaleLinkProps
  extends Omit<RemixLinkProps, "to">,
    React.RefAttributes<HTMLAnchorElement> {
  route:InternalRoutes;
  params?: Object
}

export default function LocaleLink ({
  route,
  params,
  ...rest
}: LocaleLinkProps) {
  const locale = useLocale();
  try {
    let to = getLinkByRoute(route, locale, params);
    return <Link to={to}>{rest.children}</Link>;
  } catch (err) {
    console.error(err);
    return <p>Error with Link</p>
  }
}

And then you can use it that way :

import { useTranslation } from "react-i18next";
import LocaleLink from "~/component/LocaleLink";

export default function Index() {
  const { t } = useTranslation();
  return (
    <>
      <h1>{t("home")}</h1>
      <LocaleLink route="about">{t("home.aboutLink")}</LocaleLink>
      <hr />
      <LocaleLink route="product-hello" params={{ param: "123123" }}>
         {t("home.productLink")}
      </LocaleLink>
    </>
  );
}

That way, it throw an error while in development to help you find the path, and you have a clean API to the Link component (and autocomplete for the route prop :) )