如何在第三级嵌套反应路由器中加载组件？

Question

我想加载 3 个子页面组件而不是 'Foundation Landing' 页面。单击 Foundation Landing 页面链接 Foundation Sub 1、Foundation Sub 2、Foundation Sub 3 后，'Foundation Landing' 的红点区域应替换为相应的组件 FoundationSubA、FoundationSubB、FoundationSubC。请帮助

 <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

Answer 1

Foundation 组件正在呈现指向 "/SubpageLanding/XXXX" 的链接，因此需要在 "/SubpageLanding" 路由中呈现这些匹配的路由，因此它们也会在 [=15] 中呈现=].

示例：

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

修复 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>

如何在第三级嵌套反应路由器中加载组件？

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

reactjs

react-router

react-router-dom