In your ArticleCard
, you have to create a Link
that will route to your full Article
. This link will include the id
of the article you are trying to render (ex. articles/${article._id}
)
By writing the Route
path of the component Article
as articles/:id
, this will allow us to catch that id
when Article
is rendered (accessible via this.props.match.params.id
)
Then, assuming that id
is used to fetch the article from some other API, a good place to call that would be the componentDidMount
of your Article
component.
Here is a small example which may help you out:
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
/articles/article-title
which will route to anArticle
component that will render the contents ofarticle-title
? (wherearticle-title
is a dynamic string)article-title
as a query?<Link to="/article1">Article1</Link>
and<Route path="/:id" component={articleDetail}/>