How to make a clickable article in React?

Question

JavaScript

Greetings to all who decided to respond!
I am making a blog app. There is a list of article previews, the preview structure:
-title -short
description -count of
comments on the article using routing, but I have not figured it out yet. I would be grateful if you write where you can see an example or a piece of code, and if both, it will be great! Thanks in advance. The article preview list code looks like this

const ArticlesList = ({articles}) => {
  return (
    <ul>
      {
        articles.map((articles) => {
          return (
            <li key={articles.id} > <ArticlesListPrevItem articles={articles}/> </li>
          )
        })
      }
    </ul>
  );
}

class ArticlesListContainer extends Component {

  render() {
    const { articles } = this.props;
    console.log({ articles });
    return (
      <ArticlesList articles={articles}/>
    );
  }
}
// Описание данных которые нужны из state
const mapStateToProps = ({ articles }) => {
  return { articles };
};

export default connect(mapStateToProps)(ArticlesListContainer);

The article preview code looks like this

const ArticlesListPrevItem = ({ articles }) =>{
  const { title, summary, comments } = articles;
  return (
    <div className="articles-list__prev-item" >
      <h2>{title}</h2>
      <p>{summary}</p>
      <span>Коментарии: {comments.length}</span>
      <button>Delete</button>
    </div>
  );
};

export default ArticlesListPrevItem;

The data in state is stored in the following form:

{
    articles: [
    {
    id: 1,
    title: 'AAAA',
    summary: 'minimalAAA',
    text: 'dsffsfsegrsgsrgsrs',
    comments: [
      {
        name: 'Den',
        comment: 'Hnefei nfien'
      },
      {
        name: 'Ben',
        comment: 'Lihnioekn ienf'
      }
    ]
  }
}

Answer 1

https://reacttraining.com/react-router/web/example...