[英]How to pass react router dom's Routes as props to a component?
I want to keep the main side nav as constant which should occupy 20% of the page.我想保持主侧导航不变,它应该占据页面的 20%。 Rest of the 80% of the page should have 1st row as a header nav which should be constant.
页面 80% 的 Rest 应该有第一行作为 header 导航,它应该是不变的。 and on clicking the navlinks the Routes content in row 2 should change below the header nav.
单击导航链接后,第 2 行中的路线内容应更改为 header 导航下方。
Output: Output:
____-----------------------
| | Header Nav |
|s |-----------------------
|i | Dynamic |
|d | Routes Content |
|e | |
|Na| |
|v | |
I tried like this:我试过这样的:
App.js应用程序.js
<Router>
<main>
<MainNavigation>
<Routes>
<Route path="/sessions/upcoming" element={<Sessions />} />
<Route path="/sessions/past" element={<Sessions />} />
</Routes>
</MainNavigation>
</main>
</Router>
MainNavigation.js 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>
);
};
you have a layout.你有一个布局。 Here you will use the flex structure.
在这里您将使用 flex 结构。 I'm using tailwind, you can edit your css from here
我正在使用顺风,你可以从这里编辑你的 css
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 )
(tailwind是css等价的,可以自己创建添加对应的css)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.