react-router-dom v6条件路由配置：解决NotFound重复渲染及容器包裹问题

核心思路 #

利用 React Router v6 的布局路由特性，统一管理需要包裹 Container 的页面，单独处理不需要 Container 的页面，并将 NotFound 路由放在最末尾确保仅无匹配时触发，完全在 App.tsx 根层级实现逻辑，无需逐个组件修改。

步骤1：创建带 Container 的布局组件 #

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

// 这个布局组件会给所有嵌套路由的页面自动加上 Container 包裹
const WithContainerLayout = () => {
  return (
    <Container>
      <Outlet /> {/* Outlet 会渲染当前匹配的子路由组件 */}
    </Container>
  );
};

步骤2：在 App.tsx 中配置路由 #

import { Routes, Route } from 'react-router-dom';
import WithContainerLayout from './WithContainerLayout';
import PageH from './PageH';
import Home from './Home';
import PageA from './PageA';
import PageB from './PageB';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      {/* 不需要 Container 的页面直接定义顶级路由 */}
      <Route path="/pageH" element={<PageH />} />

      {/* 需要 Container 的页面统一嵌套在布局路由下 */}
      <Route element={<WithContainerLayout />}>
        <Route path="/" element={<Home />} />
        <Route path="/pageA" element={<PageA />} />
        <Route path="/pageB" element={<PageB />} />
        {/* 所有需要 Container 的页面都添加到这里 */}
      </Route>

      {/* NotFound 路由放在最后，仅当所有前面的路由都不匹配时才渲染 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

为什么这个方案能解决你的问题 #

1. 避免多个 Routes 冲突：之前用两个 Routes 时，第二个 Routes 会独立匹配路由，访问 /pageH 时第二个 Routes 无匹配项就会渲染 NotFound。现在用单个 Routes，NotFound 放在最后，只有所有前置路由都不匹配才会触发。
2. 无需逐个组件修改：所有需要 Container 的页面只需嵌套在布局路由下，一次配置完成，不用给每个组件手动加 Container。
3. 结构清晰易维护：布局路由是 React Router v6 的推荐写法，后续新增页面时，只需判断是否需要 Container，选择放在对应层级即可。

备选方案（极简版） #

如果不想单独创建布局组件，也可以直接在 App.tsx 中通过路由路径判断是否包裹 Container：

import { Routes, Route, useLocation } from 'react-router-dom';
import Container from '@mui/material/Container';
import PageH from './PageH';
import Home from './Home';
import PageA from './PageA';
import NotFound from './NotFound';

function App() {
  const { pathname } = useLocation();
  const skipContainer = pathname === '/pageH';

  return (
    <>
      {skipContainer ? null : <Container>}
        <Routes>
          <Route path="/pageH" element={<PageH />} />
          <Route path="/" element={<Home />} />
          <Route path="/pageA" element={<PageA />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      {skipContainer ? null : </Container>}
    </>
  );
}

这个方案更简洁，但布局路由的方式扩展性更强（比如后续要加侧边栏、导航栏等通用布局时，只需修改布局组件即可）。

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