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

Question

我正在使用 react-router v4.2.2 并尝试使用一个函数来吐出一个路由列表，其组件属性值为 "project.title"，取自减速器我在用。但是，当我写：

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

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

Failed prop type: Invalid prop component of type string supplied to Route, expected function.

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

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 中使用字符串而不是函数导致错误

React router v4.2.2: using a string instead of function inside component prop of Route results in error

reactjs

react-router

react-router-v4

react-router-dom