如何使用 multilanguage/multiple index.html 文件正确设置 React Router？

Question

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

myapp.com/en/ - 英语

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

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

我之前已经用 Router Hash History 构建了类似的东西，所以我的应用程序看起来像 myapp.com/en/#/home，我的主要路线在 routes.js 当然看起来像这样

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

现在我想使用 BrowserRouter，我希望我的路由看起来像这样如果 url 是 myapp.com/en/ link 将是：

<Link to="/home" />

一旦点击它就会带你到 myapp.com/en/home 并且它会正确地呈现 linked 到它的组件路线

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

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

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

路线是这样的

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

当然是疯了，

我怎样才能达到预期的效果，或者您有什么不同的方法吗？谢谢

edit 我不是在问任何关于 React 翻译的问题，我将使用 i18next 来翻译 React 端，我是在问不同 [= 的路由问题69=] 个文件

Answer 1

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

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

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

自由导航

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

How to correctly set up React Router with multilanguage/multiple index.html files?