React Router: Handling international routes

help
1

Hey guys,
I’m just wondering how you handle international routes on React Router. I have the following route structure:

<Router path="/(:langCode)">
  <Route path="about"/>
  <Route path="order"/>
</Router>

I’m just wondering how I could easily link to these routes within a menu? Normally, I would create a Link component like this:

<Link to="/about"/>

But this would create a wrong url if I’m on myapp.com/de/order, because I’m linking to the root url and get redirected to myapp.com/about instead of myapp.com/de/about.

2

You could wrap the <Link /> component in your own component.

function LocalizedLink(props) {
  let link = "/" + props.params.langCode + "/" + props.to;
  return (
    <Link path={link} />
  );
}

then call it with:

<LocalizedLink to="/about" />

May not be fully correct as I didn’t test it but you should get the idea.

1 Like
3

Yeah, just thought about the same one. So I can access the Routers context and look for the langCode parameter. I’m just wondering why React Router doesn’t support it in the core.

4