根据一组值创建路由

Question

我想为我的网页接受的语言设置路线，例如

import Component from '../src/component/component';
<Switch>
    <Route exact path="/es" component={(props) => <Component language="es" />}/>
    <Route exact path="/en" component={ (props) => <Component language="en" />}/>
</Switch>

但是可以接受的语言取决于配置文件，将来可以添加更多语言。因此，我希望能够根据此文件的值添加这些路由。

我见过的选项是添加这样的路由：} />但是不想接受任何可能性，只是我需要的一些可能性。

是否有一种创建路由以接受多个可能的路由但不接受任何路由的方法？

谢谢。

Answer 1

您可以为接受的语言编写简单的映射，然后在其上循环以呈现路线

const languages = ['es', 'en'];

import Component from '../src/component/component';
...
<Switch>
   {languages.map(lang => (
      <Route
         key={lang}
         exact 
         path=`/${lang}` 
         component={(props) => <Component {...props} language={lang} />}/>
   )}
</Switch>

Answer 2

React路由器中的Switch组件将呈现不返回null的第一个组件，因此我们可以劫持此行为来完成您需要的操作。

首先，我们定义对象到组件的映射语言：

const langs = {
  en: ComponentEn,
  es: ComponentEs,
};

然后我们可以定义语言选择器组件：

const LanguageSelector=({match})=>{
  const language = match.params.language
  const Component = langs[language];
  if(Component) return <Component/>
  else return null;
}

现在我们可以在路由中使用它

<Switch>
  <Route path="/:language" component={LanguageSelector}/>
  <DefaultComponent/>
</Switch>

当然您可以将DefaultComponent替换为所需的任何内容