我在撰寫代碼來呈現沒有導航欄和側邊欄的登錄頁面時遇到問題。我遇到過一些提出類似問題的頁面，但似乎沒有一個與我目前的情況有關。
如何在反應路由器 的登錄頁面中隱藏導航欄給出的示例很棒，但我相信完成相同任務的方式已經隨著 react-router-dom v6 的變化而改變，這讓我在https://dev.to/ 中閱讀了有關此更改的資訊iamandrewluca/private-route-in-react-router-v6-lg5
似乎我不了解使用 React Router 進行路由的某個方面。在下面的代碼中，我有兩條路線。我希望在沒有 NavBar 和 SideBar 組件的情況下渲染的路線之一（登錄）。
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>
</>
);
};
我也嘗試過的另一種方法是將 NavBar 和 SideBar 標簽移動到 Dashboard 組件中，但是我基本上必須對任何新組件進行相同的復制和粘貼。這種方法感覺錯誤且效率低下，但如果這是正確的做法，我會做必要的
編輯：我認為重要的是包括它當前所做的是加載包含 NavBar 和 SideBar 的登錄頁面。導航到儀表板組件具有 NavBar 和 SideBar，但這是有意的。我想要的是登錄頁面沒有 NavBar 和 SideBar
uj5u.com熱心網友回復：
如果我理解您的問題，您希望在非登錄路由上呈現導航和側邊欄。為此，您可以創建一個布局組件來呈現它們，并為嵌套路由創建一個出口。
例子：
import { Outlet } from 'react-router-dom';
const AppLayout = () => (
<>
<NavBar />
<SideBar />
<main className={styles["main--container"]}>
<div className={styles["main--content"]}>
<Outlet /> // <-- nested routes rendered here
</div>
</main>
</>
);
const App = () => {
return (
<>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/" element={<AppLayout />} >
<Route path="/" element={<Dashboard />} /> // <-- nested routes
</Route>
</Routes>
</>
);
};
uj5u.com熱心網友回復：
隱藏導航欄的最簡單方法是轉到登錄頁面組件并呼叫 useLocation()。然后你會在宣告使用位置后做這樣的事情。并將其分配給變數 location { location.pathname === "/login" ？空值 ： （
渲染整個導航欄組件）；
如果你能在我用手機打字的時候閱讀，那就不行了
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358400.html