Reactjs 从一组值创建管线

我想为我的网页接受的语言设置路由，比如

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>

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

我看到的选项是添加如下路线： }/> 但我不想接受任何可能性，只是一些我需要的

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

---

谢谢。

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

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

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

react router中的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

这些路由的父组件是什么？它们在一个开关中吗？是的，我添加了它。你如何定义必须呈现的组件？你现在可以看到它添加了一个应答。它给出了一个错误语法错误：JSX值应该是一个表达式或一个引用的JSX文本。请查看编辑。我没有在它周围加上{}