Префикс React Router

Question

Я строю многоязычный сайт в React, и я использую реагирующий маршрутизатор для своей маршрутизации.Прямо сейчас у меня есть настройка, где должен присутствовать префикс для перехода к маршруту.

Я пытаюсь сделать следующее: когда я перехожу на localhost: 3000 , я хочу, чтобы мое приложение перешло на домашний компонент.И когда я перехожу на localhost: 3000 / jp , я все еще хочу перейти к домашнему компоненту, за исключением того, что теперь мой языковой префикс будет jp .

Я хочу английский длябыть языком по умолчанию и для других языков они должны присутствовать в префиксе.Прямо сейчас он переходит на домашний компонент, только если я ввожу localhost: 3000 / en .

Есть ли способ сделать это?

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

Просто добавьте Redirect в конце, который будет сопоставлен, когда ничего не происходит, и он будет перенаправлен на /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>
        );
    }
}

Демо на https://codesandbox.io/s/18rm8k82lj

---

Обновленный ответ ( из-за комментария )

Проблема состоит в том, что /:lang/ будет соответствовать /about, и язык будетбыть установленным на about.

Решение состоит в том, чтобы использовать render реквизит маршрута и решить, что вы хотите там делать

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>
    );
  }
}

Демо на https://codesandbox.io/s/k2n9997345