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

通过React Router v5处理多种语言的最佳方法是什么？

2 个答案: