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版本4來實現這一點。

Article.js文件-

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

不要忘記導入路由和鏈接。 希望這可以幫助。