Active styling is correctly applied to a nested Route but not on the parent default path=”/” in React Router

Question

I am trying to redirect a Route on my default page with to render content from another component and have both nav elements active. If I create a nested Route on any other page except the default route, both the main nav element and the nested nav element are active; however, when I try to apply the same logic to the default home page, only nested page nav element is active.

For example, the following works where when gallery and a nested route is selected

<Routes>
    <Route path="/" element={<About />} />
    <Route path="gallery" element={<Gallery />} >
       <Route index element={<Navigate replace to="projects" />} />
       <Route path="projects" element={<Projects />} />
       <Route path="HtmlCss" element={<HtmlCss />} />
       <Route path="javascript" element={<Javascript />} />
       <Route path="ux" element={<UX />} />
    </Route>
    <Route path="accessibility" element={<Accessibility />} />
</Routes>

However, when the nested Route is under the default path="/", it does not work.

<Routes>
    <Route path="about" element={<About />} />
    <Route path="/" element={<Gallery />} >
       <Route index element={<Navigate replace to="projects" />} />
       <Route path="projects" element={<Projects />} />
       <Route path="HtmlCss" element={<HtmlCss />} />
       <Route path="javascript" element={<Javascript />} />
       <Route path="ux" element={<UX />} />
    </Route>
    <Route path="accessibility" element={<Accessibility />} />
</Routes>

Is there any way to make the second version work?

===

UPDATE: Also tried useRoutes, with no desire effect

const aboutRoutes = [
    {
      path: "/",
      element: <About />,
    },
    {
      path: "/gallery",
      element: <Gallery />,
      children: [
        { index: true, element: <Navigate replace to="projects" /> },
        { path: "projects", element: <Projects /> },
        { path: "HtmlCss", element: <HtmlCss /> },
        { path: "javascript", element: <Javascript /> },
        { path: "ux", element: <UX /> },
      ],
    },
    {
      path: "accessibility",
      element: <Accessibility />,
    },
  ];

  const galleryRoutes = [
    {
      path: "about",
      element: <About />,
    },
    {
      path: "/",
      element: <Gallery />,
      children: [
        { index: true, element: <Navigate replace to="projects" /> },
        { path: "projects", element: <Projects /> },
        { path: "HtmlCss", element: <HtmlCss /> },
        { path: "javascript", element: <Javascript /> },
        { path: "ux", element: <UX /> },
      ],
    },
    {
      path: "accessibility",
      element: <Accessibility title="this is Accessibility page" />,
    },
  ];

Visual for not working - undesired result:

Visual for working - desired result:

This [post](https://stackoverflow.com/questions/76677141/react-router-dom-navlink-isactive-not-working-well-for-url-with-i) seems related. From what I've gathered, this is intentional behavior with the root `"/"` route path. — Drew Reese, Jul 15 '23 at 09:25

score 0 · Accepted Answer · answered Jul 29 '23 at 10:29

This post had a solution to my question: How to set the DefaultRoute to another Route in React Router

revised and working code:

<Routes>
    <Route path="/" element={<Navigate to="/gallery" />}>
      <Route path="gallery" element={<Gallery />} />
    </Route>

    <Route path="gallery" element={<Gallery />}>
      <Route index element={<Navigate to="projects" />} />
      <Route path="projects" element={<Projects />} />
      <Route path="HtmlCss" element={<HtmlCss />} />
      <Route path="javascript" element={<Javascript />} />
    </Route>
</Routes>

Active styling is correctly applied to a nested Route but not on the parent default path=”/” in React Router

1 Answers1