Named static path segments

[md384]

As part of upgrading from v5 to v6, I am dealing with removing regular expressions in routes and the situation I have come across is static values in paths, such as the example from https://reactrouter.com/6.28.0/start/faq#what-happened-to-regexp-routes-paths

function App() {
  return (
    <Switch>
      <Route path={/(en|es|fr)/} component={Lang} />
    </Switch>
  );
}

function Lang({ params }) {
  let lang = params[0];
  let translations = I81n[lang];
  // ...
}

with the recommended change to be

function App() {
  return (
    <Routes>
      <Route path="en" element={<Lang lang="en" />} />
      <Route path="es" element={<Lang lang="es" />} />
      <Route path="fr" element={<Lang lang="fr" />} />
    </Routes>
  );
}

function Lang({ lang }) {
  let translations = I81n[lang];
  // ...
}

My proposal is to support named static path segments that are added to the params object, for example

function App() {
  return (
    <Routes>
      <Route path="(:country)en" element={<Lang />} />
      <Route path="(:country)es" element={<Lang />} />
      <Route path="(:country)fr" element={<Lang />} />
    </Routes>
  );
}

function Lang() {
  const { country } = useParams()
}

The benefits are

• you don't need prop drilling or context for (deeply) nested components - you can just use useParams in the nested components.
• you would have access to the value in loaders via params

EDIT: our use-case for static portions of the url is to support optional segments earlier in the path and make them unambiguous, for example

/some-static-part/:variableA/:variableB?/en
/some-static-part/:variableA/:variableB?/es
/some-static-part/:variableA/:variableB?/fr

where I'd like to be able to use have

/some-static-part/:variableA/:variableB?/(:country)en
/some-static-part/:variableA/:variableB?/(:country)es
/some-static-part/:variableA/:variableB?/(:country)fr

where we'd typically create the routes using something along the lines of ['en','es,'fr'].map((country) => <Route path=`/some-static-part/:variableA/:variableB?/(:country)${country}`).

[md384]

Another possible option is to add context to the route, e.g.

function App() {
  return createRoutesFromElements(
    <Routes>
      <Route path="en" context={{country: 'en'}} lazy={() => import("./language")} />
      <Route path="es" context={{country: 'es'}} lazy={() => import("./language")} />
      <Route path="fr" context={{country: 'fr'}} lazy={() => import("./language")} />
    </Routes>
  );
}


// language.js
function Lang() {
  const { country } = useRouteContext()  // new hook
  ...
}

function loader: ({ routeContext }) {
  const { country } = routeContext
  return api.getCountryStuff(country);
}

Perhaps this is the use-case for handle but it doesn't seem simple to get that attribute in loader functions.