React应用路由渲染冗余组件问题排查求助

问题描述 #

我正在完成Coursera的React课程结业项目，使用react-router-dom v6.27.0，遇到路由相关问题：未配置路由时主页渲染正常，配置路由后，App组件内容与目标页面内容混合显示——点击“Reservations”跳转至BookingPage时，Main组件里的主页内容（Homepage、Hero等）仍会显示；配置主页路由后，内容还会重复。

相关组件代码 #

Nav组件 #

import { Routes, Route, Link } from "react-router-dom";
import BookingPage from "../BookinPage";
import AboutUs from "../AboutUs";
import Menu from "../Menu";

function Nav () {
  return(
    <div>
      <nav>
        <ul>
          <li><Link to="/" className="link">Home</Link></li>
          <li><Link to="/about" className="link">About</Link></li>
          <li><Link to="/menu" className="link">Menu</Link></li>
          <li><Link to="/booking" className="link">Reservations</Link></li>
          <li><Link to="/" className="link">Order Online</Link></li>
          <li><Link to="/" className="link">Login</Link></li>
        </ul> 
      </nav>
      <Routes> 
        <Route path="/menu" element={<Menu />} />
        <Route path="/booking" element={<BookingPage />} />
      </Routes>
    </div>
  );
}

export default Nav;

App组件 #

import './App.css';
import Header from './Header';
import Main from './Main';
import Nav from './Nav';
import "@fontsource/karla"
import "@fontsource/markazi-text";


function App() {
  return (
    <>
      <div className="banner">
        <Header />
        <Nav />
      </div>
      <Main />
    </>
  );
}

export default App;

Header组件 #

import logo from './assets/images/little_lemon_logo(sm).jpg'

function Header () {
  return (
    <header>
      <meta name="description" content="The Little Lemon restaurant website"/>
      <meta name="og:title" content="Little Lemon"/>
      <meta name="og:image" content="https://unsplash.com/photos/focus-photography-of-pumpkin-V1dae2Jj6-0"/>
      <img src={logo} alt="Little Lemon's logo" />
    </header>
  );
}

export default Header;

Main组件 #

import Hero from "../Hero";
import Homepage from "../Homepage";
import Testimonials from "../Testimonials";
import AboutUs from "../AboutUs";
import Footer from "../Footer";

function Main () {
  return (
    <>
      <Homepage />
      <Hero />
      <Testimonials />
      <AboutUs />
      <Footer />
    </>
  );
}

export default Main;

问题原因 #

1. 固定渲染非路由内容：App组件中直接渲染<Main />，无论当前路由路径是什么，Main组件包含的主页内容都会被强制渲染，导致和路由匹配的页面内容叠加显示。
2. 路由配置层级错误：<Routes>被嵌套在Nav组件内部，路由匹配的页面组件会和导航栏一起渲染，同时App组件又独立渲染Main的内容，造成内容混合。
3. 主页路由逻辑冲突：若后续添加主页路由，会同时存在Main里固定渲染的主页内容和路由匹配的主页组件，最终导致内容重复。

排查方向 #

• 梳理App组件结构：区分全局共享内容（如Header、Nav）和路由切换的页面内容，移除App中固定渲染的非全局内容。
• 调整路由配置位置：将<Routes>移至App组件的合适位置，确保只有路由匹配的组件会被渲染，替代当前直接渲染的<Main />。
• 明确路由与组件对应关系：每个路由路径对应唯一的页面组件，主页内容需通过路由<Route path="/" element={...}>渲染，而非固定在App中。
• 验证路由匹配规则：检查react-router-dom v6的路由匹配逻辑，确认无重叠路径导致的意外渲染。

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