T
TanStack•3w ago
passive-yellow

Localised routing? e.g. /en/pricing + /pl/cennik -> should be handled by single file of pricing.tsx

(Paraglide) How to handle this? I am almost sure I've seen some docs few days ago about it, but spent over an hour looking for it now and cannot git it out. I have quite few languages so creating dummy files to handle each page in each lang is completely no-go because it will be unmaintainable. How to approach it? I sorted out the middleware etc based on Igor Szymanski's repo, but I just cannot get translated paths (important for SEO in multi-lang) working. 
    paraglide({
      project: "./project.inlang",
      outdir: "./src/paraglide",
      outputStructure: "message-modules",
      cookieName: "PARAGLIDE_LOCALE",
      strategy: ["url", "cookie", "preferredLanguage", "baseLocale"],
      urlPatterns: [
        // Specific pricing route with translated paths (MUST come first)
        {
          pattern: "/pricing",
          localized: [
            ["en", "/en/pricing"],
            ["de", "/de/preise"], 
            ["pl", "/pl/cennik"],
          ],
        },
        // General wildcard pattern (MUST come last)
        {
          pattern: "/:path(.*)?",
          localized: [
            ["en", "/en/:path(.*)?"],
            ["de", "/de/:path(.*)?"],
            ["pl", "/pl/:path(.*)?"],
          ],
        },
      ],
    }),
    paraglide({
      project: "./project.inlang",
      outdir: "./src/paraglide",
      outputStructure: "message-modules",
      cookieName: "PARAGLIDE_LOCALE",
      strategy: ["url", "cookie", "preferredLanguage", "baseLocale"],
      urlPatterns: [
        // Specific pricing route with translated paths (MUST come first)
        {
          pattern: "/pricing",
          localized: [
            ["en", "/en/pricing"],
            ["de", "/de/preise"], 
            ["pl", "/pl/cennik"],
          ],
        },
        // General wildcard pattern (MUST come last)
        {
          pattern: "/:path(.*)?",
          localized: [
            ["en", "/en/:path(.*)?"],
            ["de", "/de/:path(.*)?"],
            ["pl", "/pl/:path(.*)?"],
          ],
        },
      ],
    }),
/pricing will render but any localised version will keep throwing 404
2 Replies
like-gold
like-gold•3w ago
passive-yellow
passive-yellowOP•3w ago
Not really. I’ve read docs. It works for PARAMS but when we have page which path is translated it doesn’t work. So when a file handles nested paths like in the example - category and slug it is ok, but it doesn’t work when you want to go one level hogher it doesn’t. If you take an example of “about” which is first one - about would need to be translated. I am trying to sort it out with paraglide plug-in but it doesn’t work and only English routes are working 😦 I am not sure if that's possible at all with Paraglide plugin and TanStack Router to get it working in the way I would expect it (as it is e.g. with next-intl - you define routing in similar way as above and put files like /[locale]/pricing.tsx and all langs will be resolved to this file.

Did you find this page helpful?