0

i want to make a different header & footer inside the dashboard but it still not working , how to make it work it only works inside the router itself only

here is my code :

 <Router>
    <Routes>
      <Route path="/" >
        <Header /> 
        <Route index element={<><Hero /><HomeAbout /> <Slider /> </>} />
        <Route exact path="about" element={<About />} />
        <Route exact path="contact" element={<Contact />} />
      </Route>

      <Route path="/dashboard">
        <HeaderDashBoard/>
        <Route index  />
      </Route>


    </Routes>
      <Footer /> 
 </Router>

also is this the right format to make a dashboard ?

Razor Jhon
  • 115
  • 1
  • 12

1 Answers1

1

You want to use nested routes in this case

Make another component to serve as a template

import { Outlet } from "react-router-dom";

const HomeTemplate = () => {
  return (
    <div>
      <Header /> 
      <Outlet />
      <Footer />
    </div>
  );

And now nest your routes like so

<Routes>
      <Route path="" element={<HomeTemplate />}>
        <Route index element={<><Hero /><HomeAbout /> <Slider /> </>} </Route>
        <Route exact path="about" element={<About />} />
        <Route exact path="contact" element={<Contact />} />
      </Route>
 </Routes>

Now all the routes will be wrapped with the Home Template and all the elements will be rendered where the Outlet is in the Home Template

Khab
  • 104
  • 5