How to pass react router dom's Routes as props to a component?

Question

I want to keep the main side nav as constant which should occupy 20% of the page. Rest of the 80% of the page should have 1st row as a header nav which should be constant. and on clicking the navlinks the Routes content in row 2 should change below the header nav.

Output:

____-----------------------
|  |    Header Nav        |
|s |-----------------------
|i |       Dynamic        |
|d |     Routes Content   |
|e |                      |
|Na|                      |
|v |                      |

I tried like this:

App.js

<Router>
  <main>
    <MainNavigation>
      <Routes>
        <Route path="/sessions/upcoming" element={<Sessions />} />
        <Route path="/sessions/past" element={<Sessions />} />
      </Routes>
    </MainNavigation>
  </main>
</Router>

MainNavigation.js

const MainNavigation = (props) => {
  return (
    <div>
      <SideNav />   `column 1 side navigation which occupies 20% of the page`
      <HeaderNav /> `column 2 row 1, 80% of the pages gets dispayed with main navigation bar`
      {props.childern} `column 2 row 2,  displays 80% of the page`
    </div>
  );
};

What is the question/issue? – Drew Reese Nov 29 '22 at 10:36 — Drew Reese, Nov 29 '22 at 10:36

score 0 · Answer 1 · answered Nov 29 '22 at 11:17

you have a layout. Here you will use the flex structure. I'm using tailwind, you can edit your css from here

return (
<div className="flex">
<SideNav/>
<div className='w-full flex-col'>
<Header/>
<Routes>
<Route path="/" element = {<homePage/>} />
<Route path="/" element = {<Page2/>} />
....
</Routes>
</div>
</div>

and Sidenav

 return (
    <div className='h-screen'> Sidebar </div>
  )

App

return (
  <div>
    <Layout/>
  </div>
);

You can get the layout you want in this way. ( tailwind is the css equivalent, you can create and add the corresponding css yourself )

How to pass react router dom's Routes as props to a component?

1 Answers1