Как настроить пагинацию на React?

Настройка пагинации в React может быть достаточно простой задачей, особенно при использовании библиотеки React Router. Вот несколько шагов, которые помогут вам реализовать пагинацию на React:

1. Установите React Router, если еще не установили:

npm install react-router-dom

2. Импортируйте необходимые компоненты из React Router:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

3. Создайте компонент для отображения списка элементов с пагинацией:

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const ItemList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;
  const totalPages = Math.ceil(items.length / itemsPerPage);

  const handleClick = (event, page) => {
    event.preventDefault();
    setCurrentPage(page);
  };

  const items = [/* ваш список элементов */];

  const slicedItems = items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

  return (
    <div>
      {slicedItems.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <div>
        {Array.from(Array(totalPages).keys()).map(page => (
          <Link to="/" onClick={event => handleClick(event, page + 1)}>
            {page + 1}
          </Link>
        ))}
      </div>
    </div>
  );
};

export default ItemList;

4. Используйте компоненты Router, Route и Link для настройки пути и компонента пагинации:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ItemList from './ItemList';

const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" component={ItemList} />
      </div>
    </Router>
  );
};

export default App;

5. Запустите приложение React и проверьте результат.

Это основная структура для настройки пагинации на React. Вы можете изменять количество элементов на странице и настраивать путь пагинации в соответствии с вашими требованиями. Надеюсь, это поможет вам начать работу с пагинацией в вашем приложении React!