React Router问题：多组件同时渲染而非按需逐个渲染求助

核心问题 #

你的页面混乱是因为PagingSetup组件同时直接渲染了LatestArticles和FullArticle两个组件，不管当前路由是首页还是文章页，这两个内容都会被加载显示；同时Home和Article页面都引入了这个组件，导致路由切换时重复渲染问题。

解决方案 #

我们需要让PagingSetup根据路由场景渲染对应组件，同时修复文章跳转的逻辑：

1. 重构PagingSetup组件，按需渲染内容 #

修改PagingSetup，让它接收参数决定要展示的组件：

import React from 'react';
import LatestArticles from './LatestArticles';
import all_posts from '../pages/all_posts';
import FullArticle from './FullArticle';

// 接收渲染类型和当前文章数据
const PagingSetup = ({ renderType, currentPost }) => {
  const type = 'Latest';
  const latest = all_posts.filter((latestPost) => latestPost.type === type);

  return (
    <>
      <section className="lg:py-5 py-1 contentpage max-w-[96%]">
        <div className="container w-[100%] mx-auto">
          <div className="flex lg:flex-row flex-col py-1">
            {/* 根据传入的类型渲染对应组件 */}
            {renderType === 'latest' && <LatestArticles latestPost={latest} />}
            {renderType === 'article' && <FullArticle articleBody={currentPost} />}
          </div>
        </div>
      </section>
    </>
  );
};

export default PagingSetup;

2. 修改Home页面，指定渲染最新文章列表 #

import React from 'react';
import Header from '../components/Header';
import Slides from '../components/Slides';
import PagingSetup from '../components/PagingSetup';
import Footer from '../components/Footer';
import ScrollUpButton from '../components/ScrollUpButton';

const Home = () => {
  return (
    <div>
      <Header />
      <Slides />
      {/* 传入参数，渲染最新文章列表 */}
      <PagingSetup renderType="latest" />
      <Footer />
      <ScrollUpButton />
    </div>
  );
};

export default Home;

3. 修改Article页面，获取路由参数并渲染对应文章 #

import React from 'react';
import { useSearchParams } from 'react-router-dom';
import Header from '../components/Header';
import Footer from '../components/Footer';
import PagingSetup from '../components/PagingSetup';
import ScrollUpButton from '../components/ScrollUpButton';
import all_posts from './all_posts';

const Article = () => {
  // 获取路由中的文章ID参数
  const [searchParams] = useSearchParams();
  const postId = searchParams.get('id');
  // 根据ID匹配对应文章，没有则取默认第一篇
  const currentPost = all_posts.find(post => post.id === postId) || all_posts[0];

  return (
    <>
      <div>
        <Header />
        {/* 传入参数，渲染单篇文章 */}
        <PagingSetup renderType="article" currentPost={currentPost} />
        <Footer />
        <ScrollUpButton />
      </div>
    </>
  );
};

export default Article;

4. 修复LatestArticles的跳转链接 #

把无效的<a>标签改成react-router的Link，并携带文章ID参数：

import React from 'react';
import { MdOutlineShare } from 'react-icons/md';
import { FaRegComment } from 'react-icons/fa';
import { BsHandThumbsUp } from 'react-icons/bs';
import { Link } from 'react-router-dom';

// 组件名首字母大写，符合React规范
const LatestArticles = (props) => {
  const { latestPost } = props;

  return (
    <>
      <div className="grid grid-cols-2 gap-4">
        <div className="col-span-2">
          <h2 className="text-[2rem] font-medium leading-[1.2]">Latest Post</h2>
        </div>
        {latestPost.map((latest) => (
          <div
            key={latest.id}
            className="border-blue-700 rounded-lg overflow-hidden shadow-md"
          >
            {/* 跳转到文章页并携带ID参数 */}
            <Link to={`/article?id=${latest.id}`}>
              <img
                className="object-cover object-center rounded-t-md"
                src={latest.backgroundImage}
                alt="latest"
              />
              <div className="lg:text-lg leading-[1.5] font-bold lg:px-4 px-2 py-1 text-justify">
                <h2>{latest.title}</h2>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
};

export default LatestArticles;

内容的提问来源于stack exchange，提问作者DaPlug