如何在ReactJS中实现除首页外所有页面显示Header组件

嘿，我来帮你搞定这个需求！要实现除了首页之外的所有页面都显示Header组件，有两种非常实用的方法，我给你详细拆解一下：

方法一：使用嵌套路由（推荐，符合React Router设计理念） #

React Router v6的嵌套路由可以很好地处理这种“部分页面共享布局”的场景。我们可以把需要显示Header的页面都放到一个父路由下，而首页单独作为根路径的路由：

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 首页：不显示Header */}
          <Route path='/' element={<Home/>}/>
          {/* 其他页面：共享Header布局 */}
          <Route element={<><Header/><Outlet/></>}>
            <Route path='/Breakfast' element={<Breakfast/>}/>
            <Route path='/Lunch' element={<Lunch/>}/>
            <Route path='/Snacks' element={<Snacks/>}/>
            <Route path='/Dinner' element={<Dinner/>}/>
            <Route path='/Drinks' element={<Drinks/>}/>
            <Route path='/NightLife' element={<NightLife/>}/>
          </Route>
        </Routes>
        <Footer/>
      </Router>
    </div>
  );
}

这里的关键点：

• 父路由的element里我们渲染了Header和<Outlet/>，<Outlet/>是React Router提供的占位符，用来渲染子路由的内容
• 所有需要显示Header的页面都作为这个父路由的子路由，这样它们就会自动继承Header布局
• 首页单独作为根路径的路由，不会包含Header

方法二：使用useLocation钩子判断当前路径 #

如果你不想调整路由结构，也可以通过useLocation获取当前页面的路径，然后条件渲染Header：

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

function App() {
  const location = useLocation();
  
  return (
    <div className="App">
      <Router>
        {/* 只有当前路径不是首页时，才渲染Header */}
        {location.pathname !== '/' && <Header/>}
        <Routes>
          <Route path='/' element={<Home/>}/>
          <Route path='/Breakfast' element={<Breakfast/>}/>
          <Route path='/Lunch' element={<Lunch/>}/>
          <Route path='/Snacks' element={<Snacks/>}/>
          <Route path='/Dinner' element={<Dinner/>}/>
          <Route path='/Drinks' element={<Drinks/>}/>
          <Route path='/NightLife' element={<NightLife/>}/>
        </Routes>
        <Footer/>
      </Router>
    </div>
  );
}

这个方法的思路很直接：

• 用useLocation()拿到当前的路径pathname
• 通过条件判断pathname !== '/'来决定是否渲染Header
• 这种方式适合路由结构比较简单，不想重构路由的场景

两种方法都能实现你的需求，更推荐第一种嵌套路由的方式，因为它更符合React Router的布局设计思路，后续如果有更多页面需要共享布局，扩展起来也更方便～

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