如何使用react通过散列路由实现Scrollspy

IT技术 javascript reactjs react-hooks react-router scrollspy
2021-05-01 08:59:19

我正在使用 react (Hooks)，我做了很多事情，但在这里我几天来一直被困在一个地方。

我想使用对路由的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：请参考[这正是我想要的][1]，这里使用了哈希路由。

编辑/更新

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

分享更多信息

当我打开页面时，初始路线显示 [![Check this image it shows the public route][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]

1个回答

实现是关于三个东西：

  1. 导航栏
  2. 路由器
  3. 卷轴间谍

在NavBar：这里需要第三方库，让我们安装它：

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当前活动部分已被观看的钩子中。让我们一起使用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;

此外，您可以查看codeandbox上的简单版本。

其它你可能感兴趣的问题
上一篇ReactJS 父子引用已过时的子状态 下一篇如何设置 Cloudfront & S3 以指向每条路由的 index.html？