使用react-router-dom v6渲染具有不同佈局/元素的元件：我怎麼能實現這一點？-PHP中文網路問答

我在編寫程式碼來呈現沒有導覽列和側邊欄的登入頁面時遇到問題。我遇到過一些提出類似問題的頁面，但似乎都不適合我目前的情況。

如何在反應路由器的登入頁面中隱藏導覽列給出的例子很棒，但我相信完成相同任務的方式已經隨著react-router-dom v6而改變了，這讓我在https://dev.to/iamandrewluca/private-route-in-react-中閱讀了有關此更改的資訊路由器-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>
    </>
  );
};

我也嘗試過的另一種選擇是將導覽列和側欄標籤移到儀表板組件中，但隨後我基本上必須對任何新組件進行相同的複製和貼上。這種方法感覺錯誤且效率低下，但如果這是正確的方法，我會做必要的事情

編輯：我認為重要的是包括它目前所做的事情是加載包含導覽列和側邊欄的登入頁面。導航到儀表板組件有導覽列和側邊欄，但這是有意的。我希望登入頁面沒有導覽列和側邊欄

import { Outlet } from 'react-router-dom'; const AppLayout = () => ( <>

// <-- nested routes rendered here

); const App = () => { return ( <> } /> } > } /> // <-- nested routes ); };

使用路由配置和 useRoutes 掛鉤

const routesConfig = [ { path: "/login", element: , }, { element: , children: [ { path: "/", element: , }, ], }, ];

...

import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes(routesConfig); return routes; };

使用路由設定和資料路由器（在 v6.4.0 中引入）

const routesConfig = [ { path: "/login", element: , }, { element: , children: [ { path: "/", element: , }, ], }, ];

...

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter(routesConfig); const App = () => { return ; };