react-router-dom v6中Cars页面底部显示NotFound的问题及路由方案咨询

一、修复/cars页面底部出现NotFound的问题 #

在react-router-dom v6中，Routes组件按定义顺序精确匹配路由，嵌套路由的渲染依赖Outlet。你的问题根源是路由层级错误：把/cars放在了根路由/的子组件（App）内部，导致访问/cars时，App组件会被渲染，其内部的通配路由（path="*"）会匹配未定义的子路由，进而渲染NotFound。

正确的路由结构调整： #

1. 将/cars路由提升到顶层，与根路由/同级，避免触发App组件的嵌套路由匹配：

// Route.tsx（方案1的路由文件）
import { Routes, Route, Navigate } from 'react-router-dom';
import App from './App';
import Cars from './Cars';
import Home from './Home';
import Toys from './Toys';
import Books from './Books';
import NotFound from './NotFound';

export default function Router() {
  return (
    <Routes>
      {/* /cars作为顶层路由，直接渲染Cars组件，不经过App的Container */}
      <Route path="/cars" element={<Cars />} />
      {/* 根路由/对应App组件，内部用Outlet渲染子路由 */}
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="toys" element={<Toys />} />
        <Route path="books" element={<Books />} />
        <Route path="not-found" element={<NotFound />} />
        {/* 通配路由放在最后，仅匹配根路由下未定义的子路径 */}
        <Route path="*" element={<Navigate to="/not-found" />} />
      </Route>
    </Routes>
  );
}

2. App.tsx中移除/cars路由，仅保留共享布局和Outlet：

// App.tsx
import { Outlet } from 'react-router-dom';
import Container from '@mui/material/Container';

export default function App() {
  return (
    <Container>
      {/* 仅渲染根路由下的子组件（Home/Toys/Books等） */}
      <Outlet />
    </Container>
  );
}

调整后访问/cars时，会直接匹配顶层路由，不会渲染App组件及其内部的NotFound。

二、两种路由方案的优劣对比 #

方案1（独立路由文件+Outlet） #

优势：

• 集中管理：所有路由规则在单独文件中统一维护，大型项目中易排查、修改路由逻辑
• 嵌套布局友好：天然支持路由嵌套，共享布局（如导航栏、容器）只需编写一次，避免代码冗余
• 可扩展性强：便于按业务模块拆分路由文件（比如把商品相关路由拆成ProductRoutes.tsx），再导入主路由文件，代码结构更清晰

劣势：

• 小型项目中略显冗余，多了一层文件结构

方案2（直接在Routes中定义路由） #

优势：

• 简单直接：路由规则一目了然，小型项目上手快，代码量少
• 学习成本低：不需要理解Outlet的嵌套渲染逻辑，适合新手快速开发

劣势：

• 维护成本高：大型项目中路由分散，容易出现重复路由、规则冲突，难以统一管理
• 布局冗余：嵌套场景下需要重复编写共享布局组件，代码复用性差

三、对首次内容绘制（FCP）的影响 #

两种方案对FCP没有本质差异，原因如下：

• FCP主要取决于初始加载的资源体积、请求数量和浏览器渲染速度，与路由定义方式无关
• 若未使用路由懒加载，两种方案都会在初始加载时打包所有组件代码，FCP时间基本一致
• 若使用React.lazy+Suspense实现按需加载，两种方案都能做到仅加载当前路由对应的组件，从而优化FCP
• 代码组织方式的差异不会导致打包后资源大小有明显变化，因此对FCP的影响可以忽略

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