React Router prefix

Question

I'm building a multilingual site in React and I'm using react router for my routing. Right now I have it setup where the prefix has to be present in order to transition to the route.

What I'm trying to do is the following: When I go to localhost:3000 I want my app to transition to the home component. And when I go to localhost:3000/jp I still want to transition to the home component except now my language prefix would be jp.

I want English to be the default language and for other languages they have to be present in the prefix. Right now it only transitions to the home component if I enter localhost:3000/en.

Is there a way to accomplish this?

import React, { Component } from 'react';
import { Route, Switch } from "react-router-dom";

import { Home } from '../containers/home';
import { About } from '../containers/about';
import { Contact } from '../containers/contact';


export default class Routes extends Component {
    render(){
        return(
            <Switch>
                <Route path="/:lang/about" component={About} />
                <Route path="/:lang/contact" component={Contact} />
                <Route path="/:lang/" component={Home} />
            </Switch>
        );
    }
}

Answer 1

Just add a Redirect at the end which will be matched when nothing else does and it will redirect to the /en

import React, { Component } from 'react';
import { Route, Switch, Redirect } from "react-router-dom";

import { Home } from '../containers/home';
import { About } from '../containers/about';
import { Contact } from '../containers/contact';


export default class Routes extends Component {
    render(){
        return(
            <Switch>
                <Route path="/:lang/about" component={About} />
                <Route path="/:lang/contact" component={Contact} />
                <Route path="/:lang/" component={Home} />
                <Redirect to="/en" />
            </Switch>
        );
    }
}

Demo at https://codesandbox.io/s/18rm8k82lj

---

Updated answer (due to comment)

The problem is that the /:lang/ will match /about and the lang will be set to about.

A solution is to use the render prop of the route and decide what you want to do there

export default class Routes extends Component {
  render() {
    const supportedLanguages = ["en", "jp", "de", "es"];
    return (
      <Switch>
        <Route path="/:lang/about" component={About} />
        <Route path="/:lang/contact" component={Contact} />
        <Route
          path="/:lang/"
          render={props =>
            supportedLanguages.includes(props.match.params.lang) ? (
              <Home {...props} />
            ) : (
              <Redirect to={`/en/${props.match.params.lang}`} />
            )
          }
        />
      </Switch>
    );
  }
}

Demo at https://codesandbox.io/s/k2n9997345