Untitled

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';

const Pagination = ({ totalPages, currentPage, onPageChange }) => {
  const [pages, setPages] = useState([...Array(totalPages)].map((_, i) => i + 1));

  useEffect(() => {
    setPages([...Array(totalPages)].map((_, i) => i + 1));
  }, [totalPages]);

  return (
    <div>
      <ul className="pagination">
        {pages.map((page, i) => (
          <li key={page}>
            <Link to={`/page/${page}`}>{page}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Pagination;

Este componente toma tres parámetros: totalPages, currentPage y onPageChange. El parámetro totalPages es el número total de páginas, el parámetro currentPage es la página actual y el parámetro onPageChange es una función que se llama cuando el usuario cambia de página.

El componente utiliza el hook useState para mantener el estado de las páginas. El hook useEffect se utiliza para inicializar el estado de las páginas cuando los parámetros cambian.

El componente devuelve una lista de enlaces a las páginas. Cada enlace tiene un atributo to que especifica la URL de la página. Cuando el usuario hace clic en un enlace, la función onPageChange se llama con el número de la página.

Este es sólo un ejemplo sencillo de cómo crear una paginación en React. Hay muchas otras formas de crear una paginación, y puedes personalizar este componente para que se ajuste a tus necesidades específicas.