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

不要忘记导入路由和链接。 希望这可以帮助。