React路由配置异常求助：首页多组件导致/about路由重复渲染

你当前的问题在于把首页专属内容（HeroSection、FeatureSection等）和共享布局（Navbar）都放在了父路由组件App里。React Router中，父路由的element会在所有子路由匹配时持续渲染，只有Outlet会替换为当前子路由的内容。所以访问/about时，App里的所有首页组件都会被渲染，加上Outlet里的About组件，导致内容重复。

把App改成纯布局组件，只保留共享元素（比如Navbar、全局容器）和Outlet；将首页专属内容抽成单独的Home组件，作为根路径的子路由。

步骤1：创建Home组件 #

新建Home.jsx，把原来App里的首页专属组件移进去：

import HeroSection from "./components/HeroSection";
import FeatureSection from "./components/FeatureSection";
import Workflow from "./components/Workflow";
import Pricing from "./components/Pricing";
import Testimonials from "./components/Testimonials";

const Home = () => {
  return (
    <>
      <HeroSection />
      <FeatureSection />
      <Workflow />
      <Pricing />
      <Testimonials />
    </>
  );
};

export default Home;

步骤2：修改App.jsx为布局组件 #

只保留共享元素和Outlet，让Outlet负责渲染子路由内容：

import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import { Outlet } from 'react-router-dom';

const App = () => {
  return (
    <>
      <Navbar />
      <div className="max-w-7xl mx-auto pt-20 px-6">
        <Outlet /> {/* 这里会动态渲染Home或About组件 */}
        <Footer /> {/* 如果About页面不需要Footer，把它移到Home组件里即可 */}
      </div>
    </>
  );
};

export default App;

步骤3：更新路由配置 #

在main.jsx中添加Home作为根路径的子路由：

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from "./App"
import About from './components/About'
import Home from './components/Home' // 导入Home组件

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '', // 根路径匹配此子路由，渲染Home
        element: <Home />,
      },
      {
        path: 'about', // 子路由路径无需加前缀/
        element: <About />,
      }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

• 访问http://localhost:5173时，Outlet渲染Home组件，显示完整首页内容
• 访问http://localhost:5173/about时，Outlet渲染About组件，仅显示Navbar、About内容和Footer（如果保留的话），首页专属组件不再出现

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