Показать полный текст блога после нажатия кнопки в React

Question

У меня возникают проблемы, когда я размышляю над парой концептуальных проблем в моем проекте создания-реагирования-приложения.

У меня есть три компонента: «Блоги», «Блог» и «Полный блог».Блоги - это компонент класса, который имеет состояние.Это тянет записи блога из API.Блог - это функциональный компонент, в котором есть JSX с опорами для каждой отдельной записи в блоге.У меня есть следующий код:

Компонент блогов:

import React, { Component } from 'react';
import Blog from './Blog/Blog';
import './Blogs.css';

class Blogs extends Component {
    constructor(){
        super();
        this.state={
            content: ''
        }
    }

    componentDidMount(){
        fetch(URL)
        .then(res => res.json())
        .then(data => this.setState({
            content: data
        }));
    }
  render() {

    const [...content] = this.state.content;


    const blogs = content.map(post => {
        const date = post.date.split("T")[0]

        return(
            <Blog key= {post.id}
                excerpt={post.excerpt.rendered}>
                <h4 className="post-title">{post.title.rendered}</h4>
                <span className="post-date">Published on: {date}</span>
            </Blog>
        )

    })


    return (
      <section id="blog">
        <div className="container">
            <h3>Blog</h3>
            { blogs }
        </div>
      </section>
    )
  }
}

export default Blogs

Компонент блога:

import React from 'react'
import './Blog.css'


const Blog = (props) => {
  console.log(props.path)
  return (
    <React.Fragment>
        <div className="blog-blurb">
          {props.children}
          <div dangerouslySetInnerHTML={{ __html: props.excerpt}}></div>
          <a href="/" className="btn-flat post-button">Read More</a>
        </div>
        <hr></hr>
    </React.Fragment>




  )
}

export default Blog

Эти два компонента достигают части моей цели, котораяэто список в моем главном компоненте, App.js, который показывает заголовок, дату, выдержку и кнопку «читать дальше».

Проблема, с которой я столкнулся сейчас, заключается в том, как заставить кнопку «читать дальше» перейти на новую страницу.через компонент "FullBlog" и покажите весь текст блога там.

Более конкретно, где я могу ввести response-router-dom?Как передать состояние, которое у меня есть в блогах, включая полный текст, компоненту FullBlog?Можно ли создать пользовательскую ссылку с помощью Router, которая ведет к / blog / id сообщения, на которое просматривает пользователь.Наконец, как мне реализовать кнопку возврата на целевую страницу из компонента FullBlog?