我有这样的文章列表:
<div> { this.props.articles.map(article => { return ( <ArticleCard key={article._id} article={article} /> ) }) } </div>
在ArticleCard组件中,我仅显示文章标题。我想链接到它,它将创建新的URL,例如“ article-title”并显示内容。
如何实现呢?
在您的服务器中ArticleCard,您必须创建一个Link将路由到您的完整主机Article。这个环节将包括id你试图渲染的文章(前。articles/${article._id})
ArticleCard
Link
Article
id
articles/${article._id}
通过Route将组件的路径编写Article为articles/:id,这将使我们能够捕获渲染id时的Article内容(可通过访问this.props.match.params.id)
Route
articles/:id
this.props.match.params.id
然后,假设id用于从一些其他的API获取的文章,一个好地方调用这将是componentDidMount你的Article组件。
componentDidMount
这是一个小示例,可能会对您有所帮助:
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