React router v4.2.2: использование строки вместо функции внутри компонента prop объекта Route приводит к ошибке

Question

Я использую response-router v4.2.2 и пытаюсь использовать функцию, чтобы выложить список маршрутов со значением свойства компонента "project.title", взятым из редуктора, который я использую. Тем не менее, когда я пишу:

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}/>

тогда все нормально.

Есть ли способ, которым я могу использовать заголовки каждого проекта, от моего редуктора, в этой функции, без появления этой ошибки?

Вот весь код контейнера, если он полезен:

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]}/>