通過 React Router v5 處理多種語言的最佳方式是什么？

Question

我想在我的頁面上有多種語言。 我想通過 React 和 React Router v5 來實現。 處理這個問題的最佳方法是什么？

這是我當前路由的簡單代碼：

const Routing = () => {
    return (
        <BrowserRouter>
            <Header/>
            <Route exact path='/' component={Home}/>
            <Route path='/about' component={About}/>
            <Footer/>
        </BrowserRouter>
    )
};

Answer 1

我會這樣處理：將站點副本放在每種語言的外部文件中，例如/lang/en.json 、 /lang/fr.json等。將每個頁面的副本放在該 json 文件中的對象中，以便您可以通過只是組件的那個部分，例如：

{
  "about": {
    "header": "About"
    "intro": "..."
  }
}

檢測或設置語言並加載正確的文件並將其置於路由器狀態：

componentDidMount() {
  fetch(`/lang/${this.state.lang}.json`).then(response => response.json()).then(data => {
    this.setState({ translations: data });
  });
}

然后您將需要的內容作為屬性傳遞給組件：

const Routing = () => {
  return (
    <BrowserRouter>
      <Header/>
      <Route exact path='/' component={ () => <Home copy={ this.state.translations.home } /> }/>
      <Route path='/about' component={ () => <About copy={ this.state.translations.about } /> }/>
      <Footer/>
    </BrowserRouter>
  )
};

使用這種方法，您無需為多種語言重新創建相同的組件。

更新：

要在 URL 中有一個 lang 前綴，您可以簡化整個事情：

const Routing = () => {
  return (
    <BrowserRouter>
      <Header/>
      <Route exact path='/:lang' component={ Home }/>
      <Route path='/:lang/about' component={ About } /> }/>
      <Footer/>
    </BrowserRouter>
  )
};

該參數在組件中作為this.props.match.params.lang ，您可以使用它來加載該組件的語言文件，例如/lang/s{this.props.match.params.lang}/about.json

Answer 2

您可以在路由前使用 /:lng -

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

您可以閱讀更多相關信息 - https://medium.com/@markuretsky/react-router-multilingual-362eaa33ae20