Question 205839 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    You can use useRoutes hook in react-router-dom.
    The useRoutes hook is the functional equivalent of <Routes>, but it uses JavaScript objects instead of <Route> elements to define your routes. These objects have the same properties as normal <Route> elements.

    For example:

    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 /> },
];

return useRoutes(isAbout ? aboutRoutes : galleryRoutes);
    Login or Signup to reply.
  2. 0

    In the second version of your code, where the nested routes are under the default path (path="/" element={<Gallery />}), you can make it work by using the Outlet component provided by React Router.

    The Outlet component acts as a placeholder where the nested routes will be rendered. By placing it inside the Gallery component, you can render the nested routes while keeping the main nav element active.

    Here’s an example of how you can modify your code to achieve this:

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

    By placing the nested routes under <Route path="/" element={<Outlet />}>, you are instructing React Router to render the nested routes inside the Outlet component, which is rendered within the Gallery component. This way, both the main nav element and the nested nav element will be active when accessing the nested routes.

    Remember to import the necessary components from React Router:

    import { Routes, Route, Navigate, Outlet } from 'react-router-dom';

    With this modification, the second version of your code should work as expected, and both the main nav element and the nested nav element will be active on the default home page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search