How to Load Components in a 3rd Level nested react router?

Question

I wanted to load 3 sub page components instead of 'Foundation Landing' page. Once I click on the Foundation Landing page links Foundation Sub 1, Foundation Sub 2, Foundation Sub 3 the red dotted area of 'Foundation Landing' should replace with corresponding components FoundationSubA, FoundationSubB, FoundationSubC. Please help

 <Router>
        <Routes>
          <Route path="/" element={<Welcomepage />} />
          <Route path="SubpageLanding" element={<SubpageLanding />}>
            {/* Subpages */}
            <Route path="Foundation" element={<Foundation />} />
            <Route path="Navigations" element={<Navigations />} />
            <Route path="UiComponents" element={<UiComponents />} />
            <Route path="Datavisualization" element={<Datavisualization />} />
            <Route path="MediaAndIlustration" element={<MediaAndIlustration />}
            />
          </Route>
        </Routes>
      </Router>

https://codesandbox.io/s/nested-router-ui-cvdzpe

Drew Reese · Accepted Answer · 2022-04-14 09:19:33Z

1

The Foundation component is rendering links to "/SubpageLanding/XXXX", so matching routes for these need to be rendered in the "/SubpageLanding" route so they are also rendered out in the Outlet.

Example:

<Router>
  <Routes>
    <Route path="/" element={<Welcomepage />} />
    <Route path="SubpageLanding" element={<SubpageLanding />}>
      {/* Subpages */}
      <Route path="Foundation" element={<Foundation />} />
      <Route path="FoundationSubA" element={<FoundationSubA />} />
      <Route path="FoundationSubB" element={<FoundationSubB />} />
      <Route path="FoundationSubC" element={<FoundationSubC />} />
      <Route path="Navigations" element={<Navigations />} />
      <Route path="UiComponents" element={<UiComponents />} />
      <Route path="Datavisualization" element={<Datavisualization />} />
      <Route
        path="MediaAndIlustration"
        element={<MediaAndIlustration />}
      />
    </Route>
  </Routes>
</Router>

Fix the links in Foundation:

<NavLink to="/SubpageLanding/FoundationSubA">Foundation Sub 1</NavLink>
<NavLink to="/SubpageLanding/FoundationSubB">Foundation Sub 2</NavLink>
<NavLink to="/SubpageLanding/FoundationSubC">Foundation Sub 3</NavLink>

answered Apr 14, 2022 at 9:19

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hello World Over a year ago

Hi Reese, Could you please help me here stackoverflow.com/q/71870446/15916627 ? I am stuck with the solution.

PRANAV Over a year ago

Thank You @DrewReese But how to do if it required to lead corresponding SUB tabs ? means click of Foundation Sub 1 should activate SUB 1 tab & its content click of Foundation Sub 2 should activate SUB 2 tab & its content click of Foundation Sub 3 should activate SUB 3 tab & its content codesandbox.io/s/nested-router-ui-cvdzpe

Drew Reese Over a year ago

@PRANAV Sorry, it not quite clear to me what your last comment is saying or asking. I can click through the UI until I get to "/SubpageLanding/FoundationSubAll" and see three "subsections" and each is activated when clicked on. Oh, I think I might see what you are getting at. Are you asking how to get from "/Foundation" to a specific subsection by clicking a specific "Foundation Sub X" link/button to navigate to "/SubpageLanding/FoundationSubAll" with that specific tab active?

Drew Reese Over a year ago

@PRANAV I think this is what you are describing wanting: codesandbox.io/s/… Gist is to pass some state in the route transition for which tab should be active and using it to initialize state in the FoundationSubAll component.

Collectives™ on Stack Overflow

How to Load Components in a 3rd Level nested react router?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related