React Router v6 rendering Header

Question

I'm a newbie learning ReactJS. I kinda stucked at this stage . Currently I want to render <Header /> for all pages. However, now I want Route Day1 not to display <Header />, I've posted code bellow. What should I do?

function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path="Day1" element={<Day1 />} />
        <Route path="Day2" element={<Day2 />} />
        <Route path="Day3" element={<Day3 />} />
        <Route path="News" element={<News />} />
        <Route path="Profile" element={<Profile />} />
        <Route path="404NotFound" element={<NotFound />} />
        <Route path="/" element={<Homepage />} />
        <Route path="*" element={<Navigate replace to="/404NotFound" />} />
      </Routes>
      <Footer />
    </Router>
  );
}

Please help as i'm new and cant able to figure out What's the issue. I'm currently on React-router V6

Hey there! I suggest creating a component that has your header and footer in it along with children (i.e., for the rest of the components you want to display). You can then wrap each other component in Layout. For example, . Inevitably, you will encounter other routes in the future where you may not want the header, so you might want to build something a bit more flexible now to account for that. — Amit Maraj, Apr 13 '22 at 18:39

React Router v6 rendering Header

0 Answers0