javascript - 如何使用 React 实现带哈希路由的 Scrollspy

Question

我正在使用 React(Hooks)，我做了很多事情，但几天来我一直卡在一个地方。

我想创建一个 scrollspy 也使用路由 react ，当滚动新菜单处于事件状态时我想更改路由

[请引用此链接][1] 这就是我要实现的目标，这里他们使用的是哈希路由。

我在做什么

1. 我有一个侧边栏，里面有一些菜单。
2. 我正在循环数据并显示边栏，效果很好。

我正在努力实现的目标

1. 对于每个菜单我都有一些数据，我想展示一下
2. 因此，当我滚动并且第一个菜单文本结束时，我想激活下一个菜单，但也要更改路径
3. 比如有一些路由 ---/home、/profile、/status、/info。
4. 因此，当我 **scrollspy ** 更改菜单时，我也想更改路线，因为我有来自 Api 的数据。
5. 我无法在特定路径中显示数据，例如当我单击个人资料时，我想在该页面中显示该数据，但无法传递该数据。

通过简单的点击路由就可以做到这一点，我可以很容易地实现它，但在这里我想实现其他目标并且很难做到。

JSON 数据

    [
    {
      menu: "HOME",
      path: "home",
      data:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    },
    {
      menu: "PROFILE",
      path: "profile",
      data:
        "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from 'de Finibus Bonorum et Malorum' by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."
    },
    {
      menu: "STATUS",
      path: "status",
      data:
        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English."
    },
    {
      menu: "INFO",
      path: "info",
      data:
        "Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). q"
    }
  ]

在上面的数据中，我有数据，我想在每个相应的路由、滚动或点击时显示这些数据。

点击后，我可以更改路由并呈现点击的页面。

我的代码

下面是我的菜单栏.js文件

<div className="menuBar">
  <Nav className="mr-auto ml-1">
    {data.map((li, ind) => (
      <li className="nav-item" key={li.path}>
        <NavLink
          className="nav-link"
          activeClassName="active"
          to={`${li.path}`}
          onClick={() => OnclickSidebar(li.menu, li.path)}
        >
          {li.menu}
        </NavLink>
      </li>
    ))}
  </Nav>
</div>

route.js文件

 <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/home" component={Home} />
    <Route path="/profile" component={Profile} />
    <Route path="/status" component={Status} />
    <Route path="/info" component={Info} />
    <Route path="/*" component={() => "Page not found"} />
  </Switch>

以上是我到现在为止所取得的成就，现在我没有任何前进的想法，所以在这里寻求一些想法。

PS:请引用[This is what I exactly i want][1]，这里使用了哈希路由。

编辑/更新

我有上面的数据，我已经分享了我想要实现的链接，我愿意接受关于如何处理这个问题的建议。由于我对这部分完全陌生，不知道我应该如何开始实现这一目标。

分享更多信息

当我打开页面时，初始路线显示 [![检查此图像，它显示公共(public)路线][2]][2]

现在，当我在侧边栏上滚动时，概览变为事件状态并且概览路线显示 [![查看此图片][3]][3]

以上就是我要实现的

类似地，它适用于所有侧边栏菜单，现在侧边栏也有一些子菜单，它们的工作方式完全相同，如果我能够用一个流程实现这个子菜单，我可以自己完成。为此，我只需要一个良好的开端。

[我的代码沙箱链接][4]

如何检查子菜单并在菜单处于事件状态时打开

其实我的数据有一些子菜单

    [
    {
        menu: 'HOME',
        path: 'home',
        data:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    },
    {
        menu: 'PROFILE',
        path: 'profile',
        data:
            "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from 'de Finibus Bonorum et Malorum' by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.",
        Sub_menu: [ // some menus have submenus also
            {
                menu: 'Profile1',
                path: '/profile/profile1',
                data: 'Some data for the sub menu',
            },
            {
                menu: 'Profile2',
                path: '/profile/profile2',
                data: 'Some data for the sub menu 2',
            },
        ],
    },
    {
        menu: 'STATUS',
        path: 'status',
        data:
            "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.",
    },
    {
        menu: 'INFO',
        path: 'info',
        data:
            "Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). q",
        Sub_menu: [
            {
                menu: 'info1',
                path: '/info/info1',
                data: 'Some data for the sub menu info',
            },
            {
                menu: 'info2',
                path: '/info/info2',
                data: 'Some data for the sub menu info2',
            },
        ],
    },
];

[![当具有子菜单的菜单处于事件状态时][5]][5]

[![当子菜单处于事件状态时路线会照常更改][6]][6]

Answer 1

实现是关于三个东西:

1. 导航栏
2. 路由器
3. 滚动 spy

在导航栏中:这里需要第三方库，让我们安装它:

npm install react-router-hash-link

现在，实现它:

import {HashLink} from 'react-router-hash-link';

const NavBar = () => (
  <div className="menuBar">
    <div className="mr-auto ml-1">
      {data.map((item) => (
        <li className="nav-item" key={item.path}>
          <HashLink to={`#${item.path}`} smooth={true}>
            {item.menu}
          </HashLink>
        </li>
      ))}
    </div>
  </div>
);

这时候NavBar组件就搞定了。让我们继续第二部分，路由器

您需要一个组件来呈现其上的所有数据:

<Route exact={true} path="/" component={Home} />

在示例 Home 组件中，我们需要一个组件来呈现每个部分:

const Section = ({ title, description, path }) => {
  const history = useHistory();

  useEffect(() => {
    const el = document.getElementById(path);
    const observer = new window.IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          history.push(`#${path}`);
          return;
        }
      },
      {
        root: null,
        threshold: 0.1 // set offset 0.1 means trigger if atleast 10% of element in viewport
      }
    );

    observer.observe(el);
  }, [path, history]);

  return (
    <div style={{ height: "500px" }}>
      <h3 id={path}>{title}</h3>
      <p>{description}</p>
    </div>
  );
};

最重要的魔法就在这里，在 useEffect Hook 中，当前事件部分已被观看。让我们一起使用 NavBar 和 Section 组件:

const App = () => {
  return (
    <div>
      <div>
        <NavBar />
      </div>
      <div>
        {data.map((item) => (
          <Section
            title={item.menu}
            description={item.data}
            path={item.path}
            key={item.path}
          />
        ))}
      </div>
    </div>
  );
};

export default App;

此外，您还可以在 codesandbox 上查看简单版本.