CODEWITHSUNDEEP
react-router
e.doroskevic
e.doroskevic

Reputation: 2167

React Router v4 - Issue with Route render attribute

I am trying to generate a number of routes. The code does not throw an error nor any warnings. This said, I can't seem to get my routes to work. None of the routes generated using articles.map(...) display anything when directed to. I was wondering if someone could point me in the right direction. What am I missing? Here is the snippet of the code.

function App(props){
    const articles = [
        {id: 1, title: 'title #1', author: 'author #1', date: 'dd/mm/yyyy', post: 'post #1'},
        {id: 2, title: 'title #2', author: 'author #2', date: 'dd/mm/yyyy', post: 'post #2'},
        {id: 3, title: 'title #3', author: 'author #3', date: 'dd/mm/yyyy', post: 'post #3'},
        {id: 4, title: 'title #4', author: 'author #4', date: 'dd/mm/yyyy', post: 'post #4'},
        {id: 5, title: 'title #5', author: 'author #5', date: 'dd/mm/yyyy', post: 'post #5'}
    ];

    return (
        <Router>
            <div className='container'>
                <Navigation />
                <Switch>
                    <Route exact path='/' component={ Home } />
                    <Route exact path='/login' component={ Login } /> 
                    <Route exact path='/signup' component={ Signup } />
                    <Route exact path='/about' component={ About } />
                    {
                        articles.map( entry => { 
                            let {id, title, author, date, post } = entry;

                            console.log(`/article/${id}`);
                            console.log(id, title, author, date, post);

                            <Route
                                 path={`/article/${id}`}
                                 render={
                                     props => <Article {...props} title={title} author={author} date={date} post={post}/>
                                 }  
                            />
                        })
                    }
                </Switch>
            </div>
        </Router>
    ); 
}

Here is a link to the git repository

Upvotes: 1

Views: 172

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30400

It looks like you're not returning the <Route/> component from your map() callback.

When you're defining a multi-statement => arrow function (as is the case with the map callback in your code above), you need to explicity return the result via the return keyword in order for the arrow function to return something (ie each <Route/> component)

Try the following adjustment:

{
  articles.map( entry => { 
      let {id, title, author, date, post } = entry;

      console.log(`/article/${id}`);
      console.log(id, title, author, date, post);

      // [ UPDATE ] Add return before <Route
      return (<Route
            path={`/article/${id}`}
            render={
                props => <Article {...props} title={title} author={author} date={date} post={post}/>
            }  
      />)
  })
}

Also, ensure that webpack is configured so that the bundle.js is injected into your index.html file with an absolute path. This will ensure that it can be accessed when your app first loads from a nested routes.

You can achieve this by adding the following to the output configuration of webpack.config.js:

output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'build') , 

        publicPath:'/'  /* <-- Add this to inject bundle at absolute path */
},

Upvotes: 1

Related Questions