React - как создать динамические (с помощью роутера) страницы с подробностями

Question

Это мои данные (в отдельном файле JS):

const someData= [
    {
        id: 1,
        title: "Article 1",
        desc: "Some description lorem ipsum",
    },
    {
        id: 2,
        title: "Article 2",
        desc: "Some description lorem ipsum",
    },
    {
        id: 3,
        title: "Article 3",
        desc: "Some description lorem ipsum",
    }
]

export default someData;

Теперь я отображаю данные следующим образом:

- Articles.js file

const articleItems = this.state.someData.map(item => 
         <ArticleItem key={item.id} item={item} 
      />)

return(
   <div>{articleItems}</div>
)

И перечисляю все статьи только сзаголовок статьи отображается в компоненте ArticleItem.

- articleItem.js file

return(
   <h1>{props.item.title}</h1>
)

Как создать, чтобы вы могли щелкнуть по заголовку статьи в списке, который затем перейдет к этой конкретной статье (URL должен быть / article / id) иотобразить все данные для этой конкретной статьи?

Answer 1

Используйте React Routers Version 4 для достижения этой цели.

Article.js file-

const articleItems = this.state.someData.map(item => 
        <Route key={item.id} path=`/${item.title}/${item.id}` render={
            <ArticleItem 
                {...props}
                item={item}
            />

        } /> 
      />)

return(
   <div>{articleItems}</div>
)

В файле, в котором вы рендеринг, ссылки отображаются так:

render() {
    return(
        <Link to=`/${item.title}/${item.id}`>{item.title}</Link>
    );
}

Не забудьте импортировать Route and Link.Надеюсь, это поможет.