React Router路由配置：访问/404时仅显示NotFound组件，隐藏默认组件

有两种常见方法可以实现访问/404路径时只渲染<NotFound />，不加载<Nav />、<Footer />等公共组件：

方法一：通过外层Switch拆分路由结构 #

把/404路由放在最外层的Switch中优先匹配，其他路径统一使用包含公共组件的布局：

function App() {
  return (
    <Router>
      <Switch>
        {/* 优先匹配/404，匹配成功后仅返回NotFound组件 */}
        <Route path="/404" exact>
          <NotFound />
        </Route>
        {/* 其他所有路径都渲染公共组件+业务页面 */}
        <Route path="/">
          <Nav />
          <div className="App">
            <Switch>
              <Route path="/projects">
                <Projects />
              </Route>
              <Route path="/">
                <div className='container'>
                  <Header />
                  <hr />
                  ...
                </div>
              </Route>
            </Switch>
          </div>
          <Footer />
        </Route>
      </Switch>
    </Router>
  );
}

原理：Switch组件会从上到下匹配第一个符合条件的路由，/404匹配成功后就不会执行后续的路由逻辑，自然不会加载公共组件。

方法二：使用useLocation条件渲染公共组件 #

通过useLocation钩子获取当前路径，判断是否为/404，再决定是否渲染公共组件：

import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  const isNotFoundPage = location.pathname === '/404';

  return (
    <Router>
      {/* 非404页面才显示导航 */}
      {!isNotFoundPage && <Nav />}
      <div className="App">
        <Switch>
          <Route path="/404" exact>
            <NotFound />
          </Route>
          <Route path="/projects">
            <Projects />
          </Route>
          <Route path="/">
            <div className='container'>
              <Header />
              <hr />
              ...
            </div>
          </Route>
        </Switch>
      </div>
      {/* 非404页面才显示页脚 */}
      {!isNotFoundPage && <Footer />}
    </Router>
  );
}

原理：通过路径判断动态控制公共组件的渲染状态，/404路径下直接跳过Nav和Footer的渲染逻辑。

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