如何引导链接单击公共页面&激活React路由器下的选项卡项

Question

如何加载相应的子项，并显示为每个“基础子”链接的活动？手段

• 单击Foundation 1应激活Sub1选项卡及其内容

• 单击Foundation 2应激活Sub2选项卡及其内容

• 单击Foundation 3应激活Sub3选项卡及其内容，请帮助

<路由path="FoundationSubAll“element={}

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

Answer 1

您可以在slugs组件中使用导航FoundationSubAll和useParams函数。我把你的密码箱分叉了，你可以在那里找到我的解决方案。https://codesandbox.io/s/nested-router-ui-forked-izyf2o?file=/src/FoundationSubAll.js

Answer 2

列出基础路由内的基础子路径：

<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组件中，链接到子路由并添加一个出口：

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

我想这就是我为了让它开始工作所做的一切。出口将呈现与当前url匹配的子路由。