OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Can we use both index with path properties in React Router v6?

  • Thread starter Thread starter jBailony
  • Start date Start date
J

jBailony

Guest
I have to following routes for the settings page (inside the <Route path="settings/*">):

Code:
<Routes>
    <Route index path="account" element={<AccountDetails />} />
    <Route path="password" element={<ChangePassword />} />
    <Route path="notifications" element={<Notifications />} />
    <Route
        path="platform-settings"
        element={!canManageAllEnvironments ? <Navigate to=".. " /> : <Outlet />}
    >
        <Route index element={<PlatformGeneralSettings />} />
        <Route path="roles-and-permissions" element={<RolesAndPermissions />} />
        <Route path="banners" element={<Banners />} />
        <Route path="notifications" element={<EmailNotifications />} />
        <Route path="certificates" element={<Certificates />} />
    </Route>
    <Route path="*" element={<Navigate to="." />} />
</Routes>

The account subpage is the index page, so if the user goes to the /settings/ route or the /settings/account route, they should see the account details subpage. Currently, if the route is settings/, nothing is being rendered although I am adding the index property in the account route. How should I deal with this case?

Expected to see the account subpage on /settings/ and /settings/account/ routes!

<p>I have to following routes for the settings page (inside the <code><Route path="settings/*"></code>):</p>
<pre><code><Routes>
<Route index path="account" element={<AccountDetails />} />
<Route path="password" element={<ChangePassword />} />
<Route path="notifications" element={<Notifications />} />
<Route
path="platform-settings"
element={!canManageAllEnvironments ? <Navigate to=".. " /> : <Outlet />}
>
<Route index element={<PlatformGeneralSettings />} />
<Route path="roles-and-permissions" element={<RolesAndPermissions />} />
<Route path="banners" element={<Banners />} />
<Route path="notifications" element={<EmailNotifications />} />
<Route path="certificates" element={<Certificates />} />
</Route>
<Route path="*" element={<Navigate to="." />} />
</Routes>
</code></pre>
<p>The account subpage is the index page, so if the user goes to the <code>/settings/</code> route or the <code>/settings/account</code> route, they should see the account details subpage. Currently, if the route is <code>settings/</code>, nothing is being rendered although I am adding the index property in the account route. How should I deal with this case?</p>
<p>Expected to see the account subpage on <code>/settings/</code> and <code>/settings/account/</code> routes!</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top