Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

React

Magdalena Misiuna
Magdalena Misiuna
14,873 Points
Posted by Magdalena Misiuna
Magdalena Misiuna
14,873 Points

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 <Navigate> 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?

1 Answer

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hey Magdalena Misiuna 👋

I'm not entirely sure what is happening here as usually the home route is supposed to be active by default 🤔 If I'm understanding the documentation correctly it's supposed to be active at all times unless adding the end prop.

I couldn't find a solid answer to your issue but since you want this functionality to happen on the /-route, which would then be active at all times, one quick fix would be to simply add the active class to that NavLink manually.

I realize it may not be the answer you're looking for but I hope it has been somewhat helpful nonetheless 🙂