如何在React中实现多路由布局 让登录页不显示Header和Footer

你当前的代码将<Header>和<Footer>直接包裹在路由匹配组件<Switch>外层，所以所有路由命中的页面都会强制渲染Header和Footer，自然无法实现登录注册页隐藏的需求。你可以选择以下两种方案改造：

方案1：封装公共布局组件+嵌套路由（更推荐） #

这种方式逻辑拆分清晰，布局和业务路由完全解耦，后续扩展其他布局也很方便。

1. 首先封装通用主布局组件，把需要公共展示的Header、Footer都放在该组件内：

// MainLayout.jsx 公共布局组件
const MainLayout = ({ children }) => {
  return (
    <>
      <Header />
      {/* 插槽放置对应路由的页面内容 */}
      {children}
      <Footer />
    </>
  )
}

2. 改造路由结构，把不需要公共布局的路由和需要公共布局的路由分层：

<Router history={history}>
  <Switch>
    {/* 不需要公共布局的路由直接定义，优先匹配 */}
    <Route path="/login" exact component={LoginPage} />
    <Route path="/signup" exact component={LoginPage} />
    {/* 其余所有路由统一走公共主布局 */}
    <Route path="/">
      <MainLayout>
        <Switch>
          <Route component={Home} path="/" exact />
          <Route path="/about" component={AboutPage} />
          <Route path="/community" exact />
          <Route path="/members" component={Members} />
          <Route component={NoMatch} />
        </Switch>
      </MainLayout>
    </Route>
  </Switch>
</Router>

方案2：路由路径判断动态渲染Header/Footer（适合小项目快速修改） #

如果不想调整现有路由结构，可以直接在Header、Footer组件内判断当前路由路径，命中登录/注册页时不渲染组件即可：

// Header组件内部逻辑示例
import { useLocation } from 'react-router-dom'

const Header = () => {
  const { pathname } = useLocation()
  // 匹配到不需要显示Header的路由直接返回空
  if (['/login', '/signup'].includes(pathname)) {
    return null
  }
  // 其余场景渲染Header内容
  return (
    <div>
      {/* 原有Header的代码逻辑 */}
    </div>
  )
}
// Footer组件做完全相同的路径判断即可

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