react Router，查看路由前添加變量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中是否已經包含某些內容以允許這樣做，或者我需要手動 append url 的language部分，例如： <Route path={_LANG_ + "/gallery"}> 。

可能還需要對服務器路由和 webpack 路徑進行一些調整，否則在加載 css，js 文件domain.com/en-GB/css/style.css時會出現問題。

也許有人已經反對這個想法並且可以提供一些提示。

Answer 1

我不確定你將如何處理每個組件的翻譯，但如果你有不同的組件（根據語言），那么一個選項將在你的路由器上有不同的“基本名稱” ：

<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