如何在React的不同页面中使用两个Header导航组件

方案一：通过useLocation动态判断渲染 #

利用React Router的useLocation钩子获取当前路径，根据路径判断渲染对应的Header组件，代码修改如下：

import { Routes, Route, useLocation } from 'react-router-dom';
import Header from './Header';
import Header1 from './Header1';
import Home from './Home';
import Application from './Application';
import Services from './Services';
import Subscription from './Subscription';
import Complain from './Complain';
import Footer from './Footer';

function App() {
  const location = useLocation();
  // 判断当前是否为投诉页面
  const renderHeader = location.pathname === '/complain' ? <Header1 /> : <Header />;

  return (
    <>  
      {renderHeader}
      <Routes>      
        <Route path='/' element={<Home />} />
        <Route path='application' element={<Application />} />
        <Route path='services' element={<Services />} />
        <Route path='subscription' element={<Subscription />} />
        <Route path='complain' element={<Complain />} />
      </Routes>
      <Footer />
    </>
  );
}

export default App;

这种方式简单直接，适合只有个别页面需要特殊Header的场景。

方案二：使用路由嵌套布局组件 #

将Header和Footer封装到布局组件中，不同页面使用对应的布局，代码结构更清晰：

import { Routes, Route } from 'react-router-dom';
import Header from './Header';
import Header1 from './Header1';
import Home from './Home';
import Application from './Application';
import Services from './Services';
import Subscription from './Subscription';
import Complain from './Complain';
import Footer from './Footer';

// 默认布局：使用普通Header
function DefaultLayout({ children }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

// 投诉页面布局：使用Header1
function ComplainLayout({ children }) {
  return (
    <>
      <Header1 />
      {children}
      <Footer />
    </>
  );
}

function App() {
  return (
    <Routes>      
      {/* 所有普通页面使用默认布局 */}
      <Route element={<DefaultLayout />}>
        <Route path='/' element={<Home />} />
        <Route path='application' element={<Application />} />
        <Route path='services' element={<Services />} />
        <Route path='subscription' element={<Subscription />} />
      </Route>
      {/* 投诉页面单独使用专属布局 */}
      <Route path='complain' element={<ComplainLayout><Complain /></ComplainLayout>} />
    </Routes>
  );
}

export default App;

这种方式更模块化，后续如果有更多页面需要不同布局，扩展起来更方便。

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