如何使用多语言/多个index.html文件正确设置React Router？

Question

我正在使用最新的React和React路由器版本构建一个Web应用程序，在我的情况下，我的应用程序支持多种语言，并且由于索引，我们为每种语言都有单独的输入html文件。所以对于像myapp.com这样的网址，我们会有

myapp.com/en / - 英文

myapp.com/de / - 德语等......

在服务器端，每个 / en / 文件夹当然都有自己的 index.html 文件 meta ， title 以及用给定语言编写的其他元数据，它们都可以进入我们的React应用程序（ bundle.js ）

我之前使用路由器哈希历史记录构建了类似的东西，所以我的应用程序看起来像myapp.com/en/#/home，而我在 routes.js 中的主要路线当然看起来像这样

<Route path="/" component={MainComponent}

现在我想使用BrowserRouter，我希望我的路线看起来像这样 如果网址是 myapp.com/en / 链接将是：

<Link to="/home" />

点击它后会转到 myapp.com/en/home ，它会正确呈现路径中链接到它的Compnent

 <Route path="/home" exact component={HomeContainer} />

基本上目前这只有在我做了类似的事情时才有效

<Link to=`/${getCurrentLanguage()}/home` /

，路线就是这样

<Route path=`/${getCurrentLanguage()}/home` exact component={HomeContainer} />

当然，这是疯了，

我如何实现理想的行为，或者您是否有任何不同的方法？感谢

编辑我没有询问任何有关React翻译的内容，我将使用i18next翻译React方面，我在询问使用不同index.html的路由问题文件

Answer 1

有两种方法可以解决这个问题

1. 将BrowserRouter basename属性设置为给定语言

<BrowserRouter basename=`/${getLanguage()}`>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
< /BrowserRouter>

因此，您可以使用<Link to="/about" />

自由导航
1. 或在任何其他路线之前使用/：lng

<Switch>
    <Route path="/:lng/" exact component={Home} />
</Switch>