React Router如何实现部分路由不渲染Navbar 同时正确展示404页面

问题原因 #

你当前的问题核心是两个<Switch>组件并列渲染，当第一个Switch匹配到登录、注册这类无导航路由时，第二个Switch仍会执行匹配逻辑，这类无导航路由不在第二个Switch的规则列表中，所以会命中最后的404路由，导致两个内容同时渲染。

解决方案 #

重构为嵌套路由结构，把所有路由放在同一个外层Switch中，优先匹配无导航路由，剩余所有请求统一进入带导航栏的布局组，在内层匹配业务路由和404规则，代码调整如下：

import { Switch, Route } from 'react-router-dom'

// 抽离带导航栏的公共布局组件
const LayoutWithNav = ({ children, notify }) => {
  return (
    <>
      <Navbar notify={notify} />
      {children}
    </>
  )
}

// 统一路由配置
<Switch>
  {/* 无导航栏路由优先匹配 */}
  <Route exact path="/login">
    <Login notify={setResMessage} />
  </Route>
  <Route exact path="/user/create">
    <CreateAc notify={setResMessage} />
  </Route>
  <Route exact path="/mobile/search">
    <MobileSearchPage notify={setResMessage} />
  </Route>

  {/* 剩余所有请求进入带导航栏的布局，不需要加exact属性 */}
  <Route path="/">
    <LayoutWithNav notify={setResMessage}>
      <Switch>
        {/* 带导航栏的业务路由 */}
        <Route exact path="/">
          <Home notify={setResMessage} />
          <Footer />
        </Route>
        <Route exact path="/cart">
          <Cart />
        </Route>
        <Route exact path="/product/:productID">
          <ProductDetails notify={setResMessage} />
        </Route>
        <Route exact path="/search/:product">
          <SearchPage notify={setResMessage} />
        </Route>
        <Route exact path="/payment-success">
          <PaymentSuccess />
        </Route>
        <Route exact path="/recommended">
          <Recommendations />
        </Route>
        <Route exact path="/create-product" component={AddProduct} />
        {/* 404规则放在内层Switch最后，仅未匹配到业务路由时触发 */}
        <Route component={PageNotFound} />
      </Switch>
    </LayoutWithNav>
  </Route>
</Switch>

调整后逻辑说明 #

• 所有路由在同一个外层Switch中匹配，只会渲染第一个命中的路由分支，避免多个Switch同时渲染的问题
• 无导航路由命中后直接渲染对应页面，不会进入后续的带导航布局
• 未命中无导航路由的请求统一进入带导航布局，在内层Switch中匹配业务路由，匹配失败则展示404页面，完全覆盖需求场景

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