我在编写代码来呈现没有导航栏和侧边栏的登录页面时遇到问题。我遇到过一些提出类似问题的页面,但似乎都不适合我目前的情况。
如何在 React Router 的登录页面中隐藏导航栏 给出的示例很棒,但我相信完成相同任务的方式已经随着 React-router-dom v6 的改变而改变,这让我在https://dev.to/中阅读了有关此更改的信息iamandrewluca/private-route-in-react-router-v6-lg5
看来我不理解有关 React Router 路由的某些方面。在下面的代码中我有两条路线。我希望在没有导航栏和侧栏组件的情况下渲染路线之一(登录)。
const App = () => {
return (
<>
<Routes>
<Route path="/login" element={<LoginPage />} />
</Routes>
<NavBar />
<SideBar />
<main className={styles["main--container"]}>
<div className={styles["main--content"]}>
<Routes>
<Route path="/" element={<Dashboard />} />
</Routes>
</div>
</main>
</>
);
};
Run Code Online (Sandbox Code Playgroud)
我也尝试过的另一种选择是将导航栏和侧栏标签移到仪表板组件中,但随后我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下,但如果这是正确的方法,我会做必要的事情
编辑:我认为重要的是包括它当前所做的事情是加载包含导航栏和侧边栏的登录页面。导航到仪表板组件有导航栏和侧边栏,但这是有意的。我想要的是登录页面没有导航栏和侧边栏