javascript SEO友好的分页组件与像谷歌一样的反应

Posted 2021-05-03

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

const makePaginationHref = (pages, active) => {
  let pageNumbersArray = [];
  var startIndex, endIndex;
  if (pages <= 10) {
    // less than 10 total pages so show all
    startIndex = 1;
    endIndex = pages;
  } else {
    // more than 10 total pages so calculate start and end pages
    if (active <= 6) {
      startIndex = 1;
      endIndex = 10;
    } else if (active + 4 >= pages) {
      startIndex = pages - 9;
      endIndex = pages;
    } else {
      startIndex = active - 5;
      endIndex = active + 4;
    }
  }

  // add first pagination if startIndex is not the 1
  if (startIndex > 1) {
    pageNumbersArray.push(
      <Link to={"/page/" + (active - 1)} key="1">
        <span>&lt;</span>
      </Link>
    );
  }

  // Outer loop to create parent
  for (let i = startIndex; i <= endIndex; i++) {
    pageNumbersArray.push(
      <Link to={"/page/" + i} key={i} className={active === i ? "active" : ""}>
        <span>{i}</span>
      </Link>
    );
  }

  // add last pagination if endPage is not the last pagination
  if (endIndex < pages) {
    pageNumbersArray.push(
      <Link to={"/page/" + (active + 1)} key={pages}>
        <span>&gt;</span>
      </Link>
    );
  }

  return pageNumbersArray;
};

function Pagination(props) {
  const activePage = parseInt(props.params.match.params.page_no);
  return (
    <div className="pagination">
      <h1>Active Page: {activePage}</h1>
      <h2>{makePaginationHref(props.totalPages, activePage)}</h2>
    </div>
  );
}

export default Pagination;