Help me DRY my routes.ts

[ric980]

Hello,

I've just migrated from Remix to React Router. I am having some trouble reworking my routes from file system to routes.ts file. You can easily spot the repetitions here. And these are not all of my routes. I just paste some examples.

I am wondering if I can DRY this language path param using nested routes or prefixes. I've read the docs but failed to get that param in my route module using any approach.

The second question is about DRYing all the mdx legal routes. Is there a better way to achieve the same?

export default [
  route(':lang?/', './routes/home.tsx', {index: true}),
  route(':lang?/about', './routes/about.tsx'),
  route(':lang?/bags/:id', './routes/bag.tsx'),
  route(':lang?/bags', './routes/bags.tsx'),
  route(':lang?/checkout', './routes/checkout.tsx'),
  route(':lang?/contact', './routes/contact.tsx'),
  route(':lang?/orders', './routes/orders.tsx'),

  route('delivery', './legal/delivery.mdx'),
  route('de/delivery', './legal/de.delivery.mdx'),
  route('bg/delivery', './legal/bg.delivery.mdx'),
  route('payment', './legal/payment.mdx'),
  route('de/payment', './legal/de.payment.mdx'),
  route('bg/payment', './legal/bg.payment.mdx'),
  route('privacy', './legal/privacy.mdx'),
  route('de/privacy', './legal/de.privacy.mdx'),
  route('bg/privacy', './legal/bg.privacy.mdx'),
  route('return', './legal/return.mdx'),
  route('de/return', './legal/de.return.mdx'),
  route('bg/return', './legal/bg.return.mdx'),
  route('terms', './legal/terms.mdx'),
  route('de/terms', './legal/de.terms.mdx'),
  route('bg/terms', './legal/bg.terms.mdx'),
] satisfies RouteConfig

Thank you for your help.

[sergiodxa]

I would create a function that receives the first two arguments as route and gives you a list of routes including the de and bg.

const langs = ["de", "bg"];

function multiLangRoute(path: string, file: string) {
  return [
    route(path, file), // this is the default
    ...langs.map(lang => route(`${lang}/${path}`, addToFile(lang, file))
  ]
}

Something kinda like that, implement addToFile yourself to add the language at the beginning of the file name.

Then in your list of routes you can do:

export default [
  route(':lang?/', './routes/home.tsx', {index: true}),
  route(':lang?/about', './routes/about.tsx'),
  route(':lang?/bags/:id', './routes/bag.tsx'),
  route(':lang?/bags', './routes/bags.tsx'),
  route(':lang?/checkout', './routes/checkout.tsx'),
  route(':lang?/contact', './routes/contact.tsx'),
  route(':lang?/orders', './routes/orders.tsx'),

  ...multiLangRoute("delivery", "./legal/delivery.mdx"),
  ...multiLangRoute("payment", "./legal/payment.mdx"),
  ...multiLangRoute("privacy", "./legal/privacy.mdx"),
  ...multiLangRoute("return", "./legal/return.mdx"),
  ...multiLangRoute("terms", "./legal/terms.mdx"),
] satisfies RouteConfig

[ric980]

Nice. Thank you.

I was wondering if React Router has something already build-in for similar use cases.

What about these routes:

  route(':lang?/', './routes/home.tsx', {index: true}),
  route(':lang?/about', './routes/about.tsx'),
  route(':lang?/bags/:id', './routes/bag.tsx'),
  route(':lang?/bags', './routes/bags.tsx'),
  route(':lang?/checkout', './routes/checkout.tsx'),
  route(':lang?/contact', './routes/contact.tsx'),
  route(':lang?/orders', './routes/orders.tsx'),

Can I DRY the lang param in some way? Nested routes or prefixes? I want to wrap all my routes behind :lang? param.

[sergiodxa]

If there's a layout that all :lang routes share, then use route to define the parent route and rest of the routes as nested.

If there's no layout and only the URL needs to include the param, use prefix helper.

[ric980]

Thank you. I've managed to achieve routes that I like.

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

export default [
  layout('./layout.tsx', [
    ...prefix(':lang?', [
      index('./routes/home.tsx'),
      route('about', './routes/about.tsx'),
      route('bags/:id', './routes/bag.tsx'),
      route('bags', './routes/bags.tsx'),
      route('checkout', './routes/checkout.tsx'),
      route('contact', './routes/contact.tsx'),
      route('orders', './routes/orders.tsx'),
    ]),

    ...legalRoutes('delivery'),
    ...legalRoutes('payment'),
    ...legalRoutes('privacy'),
    ...legalRoutes('return'),
    ...legalRoutes('terms'),
  ]),

  route('consent', './routes/consent.tsx'),
  route('healthcheck', './routes/healthcheck.tsx'),
] satisfies RouteConfig

function legalRoutes(key: string) {
  return [
    route(key, `./legal/${key}.mdx`),
    route(`bg/${key}`, `./legal/bg.${key}.mdx`),
    route(`de/${key}`, `./legal/de.${key}.mdx`),
  ]
}

It's clean and declarative. Nice DSL by React Router :)

[sergiodxa]

Instead of layout + prefix, just use route

export default [
  route(":lang?", './layout.tsx', [
    index('./routes/home.tsx'),
    route('about', './routes/about.tsx'),
    route('bags/:id', './routes/bag.tsx'),
    route('bags', './routes/bags.tsx'),
    route('checkout', './routes/checkout.tsx'),
    route('contact', './routes/contact.tsx'),
    route('orders', './routes/orders.tsx'),

    ...legalRoutes('delivery'),
    ...legalRoutes('payment'),
    ...legalRoutes('privacy'),
    ...legalRoutes('return'),
    ...legalRoutes('terms'),
  ]),

  route('consent', './routes/consent.tsx'),
  route('healthcheck', './routes/healthcheck.tsx'),
] satisfies RouteConfig