我正在使用react-router v4.2.2并且我正在尝试使用一个函数来吐出一个组件属性值为“project.title”的路由列表，这些路由取自我正在使用的reducer . 但是，当我写：
return <Route key={i} exact path={`/${project.title}`} exact component={project.title}/>
使用project.title部分导致此错误：
失败的道具类型：提供给Route的预期函数的类型字符串的无效道具组件 .
但是当我将project.title替换为像Project1这样的实际组件时：
return <Route key={i} exact path={`/${project.title}`} exact component={Project1}/>
那很好 .
有没有办法可以使用每个项目的 Headers ，从我的reducer，在这个函数中，没有出现这个错误？
这是整个容器代码，以防它有用：
import React from 'react';
import Project1 from '../components/project1.js';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router';
import ProjectCards from '../containers/project_cards.js';
class App extends React.Component{
render() {
var createRoutes = this.props.projects.map((project, i) => {
return <Route key={i} exact path={`/${project.title}`} exact component={project.title}/>
});
return (
<Switch>
<Route exact path="/" component={ProjectCards}/>
{createRoutes}
</Switch>
);
}
}
function mapStateToProps(state) {
return {
projects: state.projects
};
}
export default withRouter(connect(mapStateToProps)(App));
1 回答
如果是路由，则不能只将字符串作为组件传递 - 它需要实际的组件 . 我建议将所有组件保存在某种对象中，然后您可以访问：