0
<>  
  <Header />
  <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 />
</>

I have created two headers (header, header1) I want to use header1 just on complain page and except complain page I want to use header but I don't know how to use it.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Danyal Khursheed
  • 3
  • 1

1 Answers1

1

You can use conditionally rendering. And use useLocation from react-router-dom. So base on the comp that are showing that certain header is showing aswell.

import { useLocation } from "react-router-dom";
import Header from "./Header";
import Header1 from "./Header1";
import Routes from "./Routes";
import Footer from "./Footer";

function App() {
  const location = useLocation();

  // Render Header1 on Complain page and Header on all other pages
  const header = location.pathname === "/complain" ? <Header1 /> : <Header />;

  return (
    <>
      {header}
      <Routes />
      <Footer />
    </>
  );
}

export default App;
Wahlstrommm
  • 684
  • 2
  • 7
  • 21
  • This pattern is not very sustainable. Imagine more headers/footers/components and more and different combinations of routes. Better to use [layout routes](https://reactrouter.com/en/main/start/concepts#layout-routes) to achieve the conditional rendering of components. – Drew Reese May 06 '23 at 16:04