React-Router翻译路线的最佳方式？

Posted 2021-04-06

我正在构建一个需要以3种语言提供的反应应用程序。 现在，它只有英文版本 - 我正在使用反应路由器来管理页面。

我不需要翻译它，我已经有翻译，但我不知道如何在我的应用程序中实现这些。 将我的项目复制3次到/ en，/ it，/ fr听起来效率低下。

有什么建议？

     <Router >

 <div>
 <Switch>

  <Route exact path="/contact" component={Contact}  />
  <Route exact path="/where" component={Where}  />
  <Route exact path="/about" component={About}  />
  <Route exact path="/" component={Home}  />
  <Route component={NotFound}  />

  </Switch>

  </div>

  </Router>

答案

您可以使用Router params语言

<Router >
  <Route path="/:language" component={Localise}/>
</Router>

和本地化组件

render() {
    const {language} = this.props.match.params; 
    return (
        <div>
            <Switch>
              <Route exact path=`${match.path}/contact` component={Contact}  />
              <Route exact path=`${match.path}/where` component={Where}  />
              <Route exact path=`${match.path}/about` component={About}  />
              <Route exact path={match.path} component={Home}  />
              <Route component={NotFound}  />
            </Switch>
        </div>
    )
}