我正在使用react-router
v4来生成从异步API中加载的动态路由。从API检索到的数据通过其将创建阵营路由函数通过,类似于:在Redux中存储React路由
import Home from "containers/home"
import FeaturePage from "containers/featurePage"
response.map((item) => {
if (item.value.toLowerCase() === "home") {
return {
path: item.path,
component: Home,
exact: item.isExact
}
} else if (item.value.toLowerCase() === "featurePage") {
return {
path: item.path,
component: FeaturePage,
exact: item.isExact
}
} else {
// ...etc
}
});
一旦路由被加载,它们被使用动作减速器照常加入到Redux的存储。这在redux商店支持功能时效果很好。
但是在Redux商店doesn't seem to be the best way forward中存储函数。什么是更好的实施?我需要存储需要渲染的组件,这是不可序列化的。
我设法通过在存储中存储组件名称然后将组件名称传递给返回组件的函数来实现此目的。我需要这个组件,以便在创建react-router组件时引用它。来自 “容器/家” 常量getRouteComponent =名=> { 开关(名称){ 情况下 “主页” ''' 导入主页: 返回首页; 默认值: return undefined; } }; ''' –
如果你能够更新你的例子,我可以把它标记为正确的。 我创建'使用反应-router'路线: {routes.map(路线=> { 回报( <路线 关键= {} route.path确切 路径 = {route.path} 部件= {getRouteComponent(route.component)} /> ); }}} –