如何在React中单击时仅加载所需的组件

Question

我有一个简单的登录页面，其中显示了MongoDB数据库中的所有帖子。每个帖子内部都有一个按钮，当我单击该按钮时，我想呈现一个不同的组件，这是App.js的外观：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from '../src/components/Header/Header';
import Footer from '../src/components/Footer/Footer';
import Pagination from './components/Pagination/Pagination';
import Post from './components/Post/Post.jsx';
import Article from './components/Article/Article';

const App = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(5);

  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get('http://localhost:8080/');
      setPosts(res.data);
      console.log(res)
      setLoading(false);
    };

    fetchPosts();
  }, []);

  // Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  // Change page
  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    <Router>
       <div className="App">
         <Header/>
          <Route path="/Post"/>
           <div className="column-container">
            <div className="col">
              <Route path="/article" component={Article}></Route>
          <Post 
           posts={currentPosts}
           loading={loading} 
           />
           <Pagination
            postsPerPage={postsPerPage}
            totalPosts={posts.length}
            paginate={paginate}
            />
            </div>
           </div>
         <Footer/>
      </div>
     </Router>
  );
};

export default App;

我正在使用链接重定向到单击“文章”的所需组件，如下所示：

import React, { useState, Component } from 'react';
import Article from '../Article/Article.js';
import { BrowserRouter as Router, Route, Switch, Redirect, Link} from 'react-router-dom'


const Posts = ({ posts, loading, toArticle,}) => {
  toArticle = false;
  if (loading) {
    return <div class="loader">
           <div class="spinner"></div>
           </div>
  }


  return (
    <Route path="/article/:id" component={Article}>
    <div className="post-container">
        {posts.map(post => (
       <div key={post.id} className='post'>
         <img className="post-container__image" src={post.picture} alt="image"/>
           <div className="post-container__post">
             <div className="post-container__text">
               <h2 className="post-container__title">{post.title}</h2>
               <p className="post-container__date">{post.date}</p>
               <p className="post-info-container__text">{post.postContent.substring(0, 500) + "..."}</p>
               <Link to="/article" className="btn btn-primary">Read More</Link>
             </div>
           </div>
       </div>
     ))}
    </div>
  </Route>
 );
};

export default Posts;

组件已加载，但问题是帖子保留了，我只想渲染我的组件，而看不到其他任何东西，我该如何实现？我尝试使用url部分/ article 并使用“重定向”（如果这是当前网址），但结果相同。