Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

React Route v6 – useRoutes index = true property?

In this case, what is the puerpose of "index=true" ?
why do I use index=true ??
(react-router-dom v6 useRoutes)

{
      path: 'dashboard',
      element: (
        <AuthGuard>
          <DashboardLayout />
        </AuthGuard>
      ),
      children: [
           {
          path: 'e-commerce',
          children: [
            { element: <Navigate to="/dashboard/e-commerce/shop" replace />, index: true },
            { path: 'shop', element: <EcommerceShop /> },
            { path: 'product/', element: <EcommerceProductDetails /> },
            { path: 'list', element: <EcommerceProductList /> },
         
          ],
        },

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

index tells react-router that it should render the provided element when you are at the index of the route.

In this case it will render <Navigate to="/dashboard/e-commerce/shop" replace /> at the /dashboard/e-commerce route. Which will in this case make sure that the user redirects to /dashboard/e-commerce/shop if they ever accidentally land on this route.


The concept behind an index route becomes more clear with an example:

<Route path="albums" element={<BaseLayout />}>
  <Route index element={<AlbumsList />} />
  <Route path=":id" element={<AlbumDetail />} />
  <Route path="new" element={<NewAlbumForm />} />
</Route>

At /albums it will render:

<BaseLayout>
  <AlbumsList />
</BaseLayout>

At /albums/some-unique-album-id it will render:

<BaseLayout>
  <AlbumDetail />
</BaseLayout>

At /albums/new it will render:

<BaseLayout>
  <NewAlbumForm />
</BaseLayout>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading