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

问题描述

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

解决方案

使用 react-perfect-scrollbar 包来自 npm.

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

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

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

import PerfectScrollbar from 'react-perfect-scrollbar';从'react-router-dom'导入{重定向}；handleScroll = () =>{<重定向到="/article/2"/>}<PerfectScrollbar onYReachEnd={this.handleScroll}>//当您到达屏幕末尾时，它会根据您的要求调用 handleScroll 函数并重定向到其他 url.so，您可以从这里获取.//你的文章代码..</PerfectScrollbar>

I want to load multiple components on a single page and have different routes for all of them. For example i hit a route /article/1 and it loads a component, after scrolling through completely through that article i want the route to change to /article/2 and the corresponding article to load. I am using react and react router, basically i want 4 (article/3 , article/4) articles on a page and all these should be scrollable with the route changing as i scroll onto a particular article. How can i achieve this using react and react-router?

解决方案

use react-perfect-scrollbar package from npm.

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>

这篇关于是否可以在滚动时更改路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！