How to add routing for admin using createRoutesFromElements?

Question

I am trying to add routing for admin pages using react dom v6 and its accessible by /admin, lets say for example I entered /admin/products it will show the layout for admin and the products content.

Here is my code

function Layout() {
  return (
      <>
        <NavLayout/>
        <FooterLayout />
      </>
  );
}

function AdminLayout() {
  return (
      <>
        <NavadminLayout/>
        <FooteradminLayout />
        <MenuLayout />
      </>
  );
}


const router = createBrowserRouter(
  createRoutesFromElements(
    
      {/* Routes for regular user */}
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    
  )
);


function App() {
  return (
   <RouterProvider router={router}/>
  );
}

export default App;```








so I tried adding something like this

const router = createBrowserRouter( createRoutesFromElements( <>

  {/* Routes for regular user */}
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="*" element={<NotFound />} />
  </Route>
  
  <Route path="/admin" element={<AdminLayout />}>
  <Route index element={<Homeadmin />} />
  <Route path="products" element={<Products />} />
  <Route path="users" element={< Users/>} />

) );```

the <Route path="/admin" element={}> path is working but when I try to access /admin/products or /admin/users its opening but the return in not rendering and that includes Homeadmin also

So is am I on the working track or the routing in this condition should not be this way?

How to add routing for admin using createRoutesFromElements?

0 Answers0