是否可以在滚动时更改路线？

Question

我想在一个页面上加载多个组件并为所有组件设置不同的路由。例如，我点击了一条路线 /article/1 并加载了一个组件，在完全滚动浏览该文章后，我希望该路线更改为 /article/2 并加载相应的文章。我正在使用 react 和 react 路由器，基本上我希望一个页面上有 4 篇（article/3，article/4）文章，所有这些都应该可以滚动，当我滚动到特定文章时，路由会发生变化。我如何使用 react 和 react-router 来实现这一点？

Answer 1

使用来自npm 的react-perfect-scrollbar 包。

index.js（应用程序的主要入口点）添加这个 css

import 'react-perfect-scrollbar/dist/css/styles.css';

您想要滚动更改 url 的组件文件

import PerfectScrollbar from 'react-perfect-scrollbar';

import { Redirect } from 'react-router-dom';

handleScroll = () => {
  <Redirect to="/article/2" />
} 

<PerfectScrollbar onYReachEnd={this.handleScroll}> // when you reach then end of screen it's call handleScroll function and redirect to other url.so based on your requirements you can pick up from here. 
    // your articles code..
</PerfectScrollbar>