React Router多语言路由配置：默认语言与前缀路由实现问题

我来帮你搞定这个多语言路由的配置问题！你现在的核心问题是根路径localhost:3000没有对应的路由处理，而且需要让任意合法的语言前缀（比如jp）都能正确匹配到Home组件。下面是具体的解决方案：

1. 添加根路径重定向 #

首先，我们需要把根路径/自动重定向到默认语言（英文）的路由/en，这样用户访问localhost:3000时就会自动跳转到英文版本的Home页面。

2. 确保语言前缀路由匹配任意合法语言 #

你现有的/:lang/路由其实已经可以匹配像/jp/这样的路径，只需要保证它在Switch里的位置正确（放在具体页面路由的后面，比如about、contact之后）。

修改后的完整路由代码如下：

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>
        {/* 根路径重定向到默认英文路由 */}
        <Redirect exact from="/" to="/en" />
        {/* 匹配带语言前缀的About页面 */}
        <Route path="/:lang/about" component={About} />
        {/* 匹配带语言前缀的Contact页面 */}
        <Route path="/:lang/contact" component={Contact} />
        {/* 匹配任意语言前缀的Home页面（比如/en/、/jp/） */}
        <Route path="/:lang/" component={Home} />
        {/* 可选：处理不存在的语言前缀，比如跳回默认英文 */}
        {/* <Redirect from="/:lang*" to="/en" /> */}
      </Switch>
    );
  }
}

3. 在组件中获取并使用语言参数 #

在Home、About这些组件里，你可以通过props.match.params.lang拿到当前的语言前缀，用来切换网站的多语言配置。比如在Home组件中：

export function Home(props) {
  const currentLang = props.match.params.lang;
  
  // 这里可以根据currentLang设置你的多语言环境，比如切换i18n的语言
  // 示例：i18n.changeLanguage(currentLang);
  
  return (
    <div>
      <h1>Home Page</h1>
      <p>Current Language: {currentLang}</p>
    </div>
  );
}

为什么之前的配置不生效？ #

你之前的路由只配置了带/:lang/前缀的路径，没有处理根路径/，所以访问localhost:3000时没有匹配到任何Route组件，自然不会跳转到Home。添加根路径的重定向后，就解决了这个问题，同时原有的/:lang/路由已经支持任意语言前缀（包括jp），所以访问localhost:3000/jp会直接匹配到Home组件。

内容的提问来源于stack exchange，提问作者Jir