如何在 React 的分页中添加活动类

Question

I have a pagination component like this:

import React from "react";
import { Link } from "react-router-dom";

const Pagination = ({ currentPage, postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }
  return (
    <nav>
      <ul className="pagination">
        <li class="page-item">
          <Link class="page-link" to={currentPage-1} onClick={() => paginate(currentPage-1)} aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </Link>
        </li>
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <Link
              onClick={() => paginate(number)}
              to={number}
              className="page-link"
            >
              {number}
            </Link>
          </li>
        ))}
        <li class="page-item">
          <Link class="page-link" to={currentPage+1} onClick={() => paginate(currentPage+1)} aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;

So, what I want to do is when it is on page 5 for example, I want to add active class to that li so I can figure out on what page I am. Could you give me an advice about it?

Thanks

Answer 1

You cann add calssName active for currentPage like this:

<Link
  className={`page-link ${currentPage === number ? "active" : ""}`}
>

Answer 2

Instead of using Link, yiou can use NavLink which gives you the isActive property to add activeClassName to the page index in your pagination:

<NavLink to={`${yourLinkToPage}`} className={({isActive}) => `someClassName ${isAtive ? activeClassName : ""}`} >LinkName</NavLink>

and you can see the documentation also:

verion 5 , version 6