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

您要滚动滚动的位置上的组件文件

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>

可以滚动更改路线吗？

1 个答案: