如何在React Router 4中实现动态路由？

Question

我有这样的文章列表：

{{1}}

在ArticleCard组件中，我只显示了我的文章的标题。我想给它添加一个链接，这将创建一个新的URL，例如＆＃39; article-title＆＃39;并显示内容。

如何实现这一目标？

Answer 1

在您的ArticleCard中，您必须创建一个Link，它将路由到您的Article。此链接将包含您尝试呈现的文章的id（例如articles/${article._id}）

通过将组件Route的{​​{1}}路径写为Article，这将允许我们在呈现articles/:id时捕获id（可通过Article）

然后，假设this.props.match.params.id用于从其他API获取文章，那么调用该文章的好地方就是id组件的componentDidMount。

这是一个可以帮助你的小例子：

Article