javascript - React router 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>
)