反應路由器 dom 6 路由結構與布局

Question

我有這個頁面結構

• 登錄（根頁面）
• 忘記密碼
• 儀表板（需要包裝布局）
• 訂單（需要包裝布局）

訂單頁面和儀表板需要包裝器布局。

現在我有這段代碼

const routes = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route path="orders" element={<Orders />} />
      <Route path="dashboard" element={<Dashboard />} />
    </Route>
  )
);

這是根布局

export default function RootLayout() {
  return (
    <div>
      <header>
        <h1>This top header</h1>
      </header>
       
      <main>
        <Outlet/>
      </main>
    </div>
  )
}

我不確定如何將登錄頁面添加到根路徑並將忘記密碼頁面添加到"/forget-password"路徑。 RootLayout應該包含在這兩個頁面中。

我已經嘗試過這種方法，即使它添加了一個額外的"/app"部分。 但這也沒有按預期工作

createRoutesFromElements(
  <Route path="/" element={<Login  />}>
    <Route path="app" element={<RootLayout />}>
      <Route path="orders" element={<Orders />} />
      <Route path="dashboard" element={<Dashboard />} />
    </Route>
  </Route>
)

我怎樣才能用react-router-dom@6實現這個？

Answer 1

createRoutesFromElements需要一個 React 節點。 在"/"上渲染單個“外部”路由，沒有默認渲染Outlet的元素。 "RootLayout" 為布局路由，不需要參與路由路徑匹配，省略path="app"屬性。

createRoutesFromElements(
  <Route path="/">
    <Route index element={<Login />} /> // <-- "/"
    <Route
      path="forgot-password             // <-- "/forgot-password"
      element={<ForgotPassword />}
    />

    <Route element={<RootLayout />}>
      <Route
        path="orders"                   // <-- "/orders"
        element={<Orders />}
      />
      <Route
        path="dashboard"                // <-- "/dashboard"
        element={<Dashboard />}
      />
    </Route>
  </Route>
)