如何引导 link 单击到公共页面并激活 React Router 下的选项卡项

Question

如何加载相应的 SUB 项目并显示每个 'Foundation Sub' link 的活动？意思是

单击 Foundation Sub 1 应激活 SUB 1 选项卡及其内容
单击 Foundation Sub 2 应激活 SUB 2 选项卡及其内容
单击 Foundation Sub 3 应激活 SUB 3 选项卡及其内容请帮助

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

Answer 1

在Foundation路由中列出Foundation的子路由：

<Route path="Foundation" element={<Foundation />}>
  <Route path="FoundationSubA" element={<FoundationSubA />} />
  <Route path="FoundationSubAll" element={<FoundationSubAll />} />
  <Route path="FoundationSubB" element={<FoundationSubB />} />
  <Route path="FoundationSubC" element={<FoundationSubC />} />
</Route>

然后，在Foundation组件中，link到subroutes中，添加一个Outlet：

import React from "react";
import { NavLink, Outlet } from "react-router-dom";
function Foundation(props) {
  return (
    <div className="border-dot ">
      Foundation Landing
      <p className="landinglinks">
        <NavLink to="FoundationSubA">
          Foundation Sub 1
        </NavLink>
        <NavLink to="FoundationSubB">
          Foundation Sub 2
        </NavLink>
        <NavLink to="FoundationSubC">
          Foundation Sub 3
        </NavLink>
      </p>
      <Outlet />
    </div>
  );
}

export default Foundation;

最后，实现 FoundationSubA 组件，以便可以渲染它：

import React from "react";

export default function FoundationSubA(props) {
  return <div className="border-dot-sub">Foundation Sub 3</div>;
}

我想这就是我为让它工作所做的一切。 Outlet 将渲染匹配当前 url

的子路由

Answer 2

您可以在 FoundationSubAll 组件中使用导航 slugs 和 useParams 功能。我分叉了您的代码发送框，您可以在其中找到我的解决方案。 https://codesandbox.io/s/nested-router-ui-forked-izyf2o?file=/src/FoundationSubAll.js

如何引导 link 单击到公共页面并激活 React Router 下的选项卡项

How to lead a link click to common page & activate tab items under React Router

reactjs

router