Question

我正在使用react-router v4.2.2并尝试使用一个函数来吐出一个组件属性值为＆＃34; project.title＆＃34;的路由列表，取自我正在使用的reducer 。但是，当我写：

return <Route key={i} exact path={`/${project.title}`} exact component={project.title}/>

使用project.title部分会导致此错误：

道具类型失败：提供的component类型的道具string无效到Route，预计function。

但是当我将project.title替换为像Project1这样的实际组件时：

return <Route key={i} exact path={`/${project.title}`} exact component={Project1}/>

那很好。

有没有办法可以在这个函数中使用我的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));

Answer 1

如果是路由，你不能只传递一个字符串作为组件 - 它需要一个实际的组件。我建议将所有组件保存在某种对象中，然后您可以访问：

const projects = {
  Project1,
  …
};
…
<Route key={i} exact path={`/${project.title}`} exact component={projects[project.title]}/>

React router v4.2.2：在Route的组件prop中使用字符串而不是函数导致错误

1 个答案: