在React路由器中按名称调用组件

Question

我正在使用具有动态路由的最新版本的React Router 4.1.2。

这是为我工作：

routes.push(<Route key={tab.id} exact path="/" component={Dashboard}/>)

但是，这是行不通的：

routes.push(<Route key={tab.id} exact path="/" component={tab.component}/>)

显然因为{tab.component}是一个字符串（与Dashboard值），在那里{Dashboard}是一个功能。

我该如何让它工作？如何将我的字符串变成与字符串名称相同的React组件？

Answer 1

一个简单的方法是将组件放置在地图中，以便按名称查找它们。当你想通过字符串取回某些东西时，这是一种非常常见的模式。

const componentByName = { 
    Dashboard: <Dashboard /> 
}; 

routes.push(<Route 
    key={tab.id} 
    exact path="/" 
    component={componentByName[tab.component]}/> 
);