Блог

Я хочу загрузить несколько компонентов на одной странице и иметь разные маршруты для всех них. Например, я нажимаю на маршрут / article / 1, и он загружает компонент, после полной прокрутки этой статьи я хочу, чтобы маршрут изменился на /article / 2 и соответствующая статья была загружена. Я использую react и react router, в основном я хочу 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';

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>