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

我正在构建一个 Web 应用程序，使用最新的 React 和 React Router 版本，就我而言，我的应用程序支持多种语言，并且由于索引，我们为每种语言都有单独的条目 html 文件。因此，对于像 myapp.com 这样的 url，我们会

myapp.com/en/- 英语

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

在服务器端，每一个/en/文件夹当然会有自己的索引.html文件与meta, title以及用给定语言编写的其他元数据，它们都可以访问我们的 React 应用程序（捆绑包.js)

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

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

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

<Link to="/home" />

一旦点击它就会带你去myapp.com/en/home它会正确渲染路由中链接到它的组件

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

基本上目前只有当我做了这样的事情时这才有效

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

路线是这样的

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

这当然是疯狂的，

我怎样才能实现预期的行为，或者您有什么不同的想法吗？谢谢

edit我不是在问任何有关 React 翻译的问题，我将使用 i18next 来翻译 React 端，我问的是使用不同的 index.html 文件进行路由的问题

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

1. 将 BrowserRouter 基本名称属性设置为给定语言

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

这样您就可以自由导航<Link to="/about" />

2. 或在任何其他路线之前使用 /:lng

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