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

Question

I am using react-router v4.2.2 and am trying to use a function to spit out a list of routes with a component property value of "project.title", taken from a reducer I am using. However, when I write:

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

using the project.title part results in this error:

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

but when I replace project.title with an actual component like Project1:

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

then it's fine.

Is there a way I can use the titles of each project, from my reducer, in this function, without this error popping up?

here is the whole container code, in case it's helpful:

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));

Andrew Li · Accepted Answer · 2017-12-21 23:13:29Z

2

You can't just pass a string as the component if a route -- it expects an actual component. What I would recommend is saving all your components in some kind object which then you can access:

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

answered Dec 21, 2017 at 23:13

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user74843 Over a year ago

I placed an object in the render function, and am trying to get all the links to direct to the first project (component={projects[1]}) just to test that this works, but now no component is being rendered when the project rerenders after a card has been clicked :/

user74843 Over a year ago

oh! I just replaced that code with the exact code you suggested: projects[project.title] and this worked! I'm sorry, I don't know why I didn't do that to start off with- the logic was unfamiliar to me and I think I got confused and tried to get to the first project in the object, as though the object was placed in an array of objects. Sorry about that, and thank you so much for your help!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related