反应路由器，在查看路由之前将变量添加到url

Question

我开始使用reactJS 和nodejs 构建下一个网站。该网站必须至少有 2 种语言，并且应该可以以所需语言共享指向网站的链接。我很快得出结论，我需要的是具有以下 url 结构

domain.com/en-GB
domain.com/en-GB/gallery
domain.com/en-GB/contact

前端Router:

  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

  ...
  <Router>
    <React.Fragment>
      <Header />
        <Suspense fallback={<Loading />}>
          <Switch>
            <Route exact path="/">
              <Landing />
            </Route>
            <Route path="/gallery">
              <Gallery />
            </Route>
            <Route path="/about-us">
              <AboutUs />
            </Route>
            <Route path="/contact">
              <Contact />
            </Route>
            <Route>
              <PageNotFound />
            </Route>
          </Switch>
        </Suspense>
      <Footer />
    </React.Fragment>
  </Router>
  ...

前端菜单：

import { NavLink } from "react-router-dom";

...
<NavLink to="/about-us">
    {Lang.resolve("HEADER_MENU_ABOUT_US")}
</NavLink>
...

webpack 配置片段：

...
const extractTextPlugin = new ExtractTextPlugin({
  filename: "css/style.[hash:8].css",
  allChunks: true
});

module.exports = {
  ...
  output: {
    filename: "js/main.[hash:8].js"
  }
  ...
},
...

服务器路由：

...
const router = express.Router();

let landing = (req, res, next) => {
  res.sendFile(path.join(__dirname, "../../index.html")); // html build by webpack
};

router.get("/", landing);
router.get("/:view", landing);
...

我想知道reactJS 中是否已经有一些东西允许这样做，或者我需要手动附加language 部分网址，例如：<Route path={_LANG_ + "/gallery"}>。

可能还需要对服务器路由和webpack路径进行一些调整，否则在加载css、js文件时会出现问题domain.com/en-GB/css/style.css。

也许有人已经反对这个想法并且可以提供一些提示。

Answer 1

我不确定您将如何处理每个组件的翻译，但如果您有不同的组件（根据语言），那么您的 "basenames" 将有不同的选项strong>路由器：

<BrowserRouter basename="/calendar">
<Link to="/today"/> // renders <a href="/calendar/today">
<Link to="/tomorrow"/> // renders <a href="/calendar/tomorrow">
...
</BrowserRouter>

来自文档： https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

类似的问题： Multiple BrowserRouter Shows Multiple Components