我有一个这样的文章列表：
<div>
{
this.props.articles.map(article => {
return (
<ArticleCard key={article._id} article={article} />
)
})
}
</div>
在 ArticleCard 组件中，我只显示我的文章的标题。我想添加一个指向它的链接，它会创建像“文章标题”这样的新 URL 并显示内容。
如何实现这一目标？
在你的ArticleCard，你必须创建一个Link将路由到您的完整Article。此链接将包含id您尝试呈现的文章（例如articles/${article._id}）
通过Route将组件的路径写Article为articles/:id，这将使我们能够捕捉到id何时Article呈现（可通过 访问this.props.match.params.id）
然后，假设它id用于从其他 API 获取文章，那么调用它的好地方componentDidMount就是您的Article组件的 。
这是一个小例子，可以帮助你：
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'
const ParamsExample = () => (
<Router>
<Switch>
<Route exact path="/" component={ArticleList} />
<Route path="/articles/:id" component={Article} />
</Switch>
</Router>
)
const article = {
_id: 1,
title: 'First Article'
};
const ArticleList = () => (
<div>
<ArticleCard key={article._id} article={article} />
</div>
);
const ArticleCard = ({ article }) => (
<div>
<h2>{article.title}</h2>
<Link to={`/articles/${article._id}`}>SEE MORE</Link>
</div>
);
class Article extends React.Component {
componentDidMount() {
console.log('Fetch API here: ', this.props.match.params.id);
}
render() {
return (
<div>
{`Fetching...${this.props.match.params.id}`}
</div>
);
}
}
export default ParamsExample