React Router中未嵌套布局组件的路由仍渲染布局问题解决

React Router v6 中，所有挂载在渲染树内的<Routes>组件会独立执行路径匹配，只要当前URL匹配到某组<Routes>下的规则，对应位置的内容就会渲染，不同<Routes>的匹配结果互不影响。
你的代码中<QuizBoxContainer>是直接写在组件返回结构里的常驻节点，没有和路由匹配逻辑做绑定，无论访问什么路径它都会被渲染——哪怕它内部的<Routes>没有匹配到当前路径，容器本身的DOM结构、样式依然会生效，这就是访问/wrong-answer路径时布局仍然存在的核心原因。

这里提供两种可落地的实现方式，优先选第一种官方推荐方案：

方案1：使用布局路由（推荐） #

通过路由嵌套的方式把需要套用公共布局的路由归为一组，只有匹配到组内路由时才会渲染对应布局容器，从根源上避免无关节点常驻：

// App.js
import { Routes, Route, Outlet } from 'react-router-dom'

// 封装Quiz公共布局
const QuizLayout = () => {
  return (
    <QuizBoxContainer>
      {/* 子路由匹配到的组件会渲染在Outlet位置 */}
      <Outlet />
    </QuizBoxContainer>
  )
}

const App = () => {
  return (
    <div className={styles.container}>
      <Header />
      <main>
        <Routes>
          {/* 所有需要套用QuizBoxContainer的路由放在该组下 */}
          <Route element={<QuizLayout />}>
            <Route path='/' element={<QuizSelect />} />
            <Route path='quiz-for/:language' element={<QuizCard />} />
            <Route path='result' element={<ResultPage />} />
          </Route>
          {/* 独立路由不套用Quiz布局，可单独配置其他布局 */}
          <Route path='wrong-answer' element={<WrongAnswer />} />
        </Routes>
      </main>
    </div>
  )
}

这种方案可维护性更强，后续新增其他布局的路由只需要新增对应的布局路由组即可，不需要手动维护排除路径列表，适合绝大多数项目场景。

方案2：基于路径做条件渲染 #

如果不想调整现有路由结构，可以通过useLocation获取当前路径，判断是否需要渲染<QuizBoxContainer>：

// App.js
import { Routes, Route, useLocation } from 'react-router-dom'

const App = () => {
  const { pathname } = useLocation()
  // 配置不需要套用QuizBoxContainer的路径
  const excludeLayoutPaths = ['/wrong-answer']
  const shouldRenderQuizLayout = !excludeLayoutPaths.includes(pathname)

  return (
    <div className={styles.container}>
      <Header />
      <main>
        {shouldRenderQuizLayout ? (
          <QuizBoxContainer>
            <Routes>
              <Route path='/' element={<QuizSelect />} />
              <Route path='quiz-for/:language' element={<QuizCard />} />
              <Route path='result' element={<ResultPage />} />
            </Routes>
          </QuizBoxContainer>
        ) : (
          <Routes>
            <Route path='wrong-answer' element={<WrongAnswer />} />
          </Routes>
        )}
      </main>
    </div>
  )
}

这种方案改动量小，适合小型项目快速调整，但后续新增独立布局路由时需要同步维护排除路径列表，维护成本相对更高。

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