I have this page structure

• login (Root page)
• forget password
• dashboard (Wrapper layout needed)
• orders (Wrapper layout needed)

The orders page and Dashboard needed the wrapper layout.

Right now I have this code

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

And this is root layout

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

I am unsure how I can add Login page to the root path and Forget password page to the "/forget-password" path. RootLayout should not wrap in those two pages as well.

I have tried this approach even though it is adding a extra "/app" part. But this also not working as intended

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

How can I achieve this with react-router-dom@6?

I have this page structure

• login (Root page)
• forget password
• dashboard (Wrapper layout needed)
• orders (Wrapper layout needed)

The orders page and Dashboard needed the wrapper layout.

Right now I have this code

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

And this is root layout

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

I am unsure how I can add Login page to the root path and Forget password page to the "/forget-password" path. RootLayout should not wrap in those two pages as well.

I have tried this approach even though it is adding a extra "/app" part. But this also not working as intended

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

How can I achieve this with react-router-dom@6?

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow edited Jan 13, 2023 at 6:31 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Jan 13, 2023 at 6:20 margherita pizzamargherita pizza 7,2272929 gold badges103103 silver badges178178 bronze badges 1

• Related: Using createBrowserRouter and createRoutesFromElements to create routes and navigate between to ponents – ggorlen Commented yesterday

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

createRoutesFromElements expects a single React node. Render a single "outer" route on "/" with no element which will render an Outlet by default. "RootLayout" is a layout route and doesn't need to participate in the route path matching, omit the path="app" prop.

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>
)