React Router v4 - проблема с атрибутом рендеринга маршрута

Question

Я пытаюсь создать несколько маршрутов.Код не выдает ни ошибки, ни предупреждений.Это сказало, я не могу заставить мои маршруты работать.Ни один из маршрутов, созданных с использованием articles.map(...), ничего не отображает, когда направлен на.Мне было интересно, если кто-то может указать мне в правильном направлении.Чего мне не хватает?Вот фрагмент кода.

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

Вот ссылка на репозиторий git

Answer 1

Похоже, вы не возвращаете компонент <Route/> из вашего map() обратного вызова.

Когда вы определяете функцию со стрелкой =>, состоящую из нескольких операторов (как в случае с обратным вызовом карты в приведенном выше коде), вам необходимо подробно показать результат через ключевое слово return, чтобычтобы функция стрелки возвращала что-то (т.е. каждый <Route/> компонент)

Попробуйте выполнить следующую настройку:

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

Кроме того, убедитесь, что веб-пакет настроен таким образом, что bundle.js вводитсяв ваш файл index.html с абсолютным путем.Это обеспечит доступ к нему при первой загрузке приложения с вложенных маршрутов.

Этого можно добиться, добавив следующее к output конфигурации webpack.config.js:

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

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