React分页异常：点击页码后自动跳回首页的技术求助

问题现象 #

• 点击切换页码（如第2页），页面短暂显示对应结果后立刻跳回第1页
• 每次点击分页按钮都会触发页面刷新

代码实现 #

AccountShow组件代码 #

import Table from "react-bootstrap/Table";
import axios from "axios";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Search from "../components/Search";
import Pagination from "../components/Pagination";

const endpoint = "http://localhost:8000/api";
const AccountShow = () => {
  const [accounts, setAccounts] = useState([]);

  const keys = [
    "nome",
    "razaoSocial",
    "statusConta",
    "setor",
    "segmentoAtuacao",
    "naturezaJuridica",
  ];
  const [query, setQuery] = useState("");

  const [currentPage, setCurrentPage] = useState(1);
  const [accountsPerPage] = useState(5);
  const indexOfLastAccount = currentPage * accountsPerPage;
  const indexOFirstAccount = indexOfLastAccount - accountsPerPage;
  const currentAccounts = accounts.slice(
    indexOFirstAccount,
    indexOfLastAccount
  );
  const paginate = (pageNumber) => setCurrentPage(pageNumber);
  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpoint}/accounts`);
    setAccounts(response.data);
  };

  const deleteAccount = async (id) => {
    await axios.delete(`${endpoint}/account/${id}`);
    getAllAccounts();
  };

  return (
    <div className="d-grid gap-2">
      <div className="row">
        <div className="col-8">
          <Form className="d-flex m-1">
            <Form.Control
              type="text"
              placeholder="Filtro"
              className="me-2"
              aria-label="Search"
              onChange={(e) => setQuery(e.target.value)}
            />
          </Form>
        </div>
        <div className="col-4">
          <Link
            to="/account/create"
            className="col-11 btn btn-outline-primary m-1 "
          >
            Create
          </Link>
        </div>
      </div>
      <Table hover className="">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th className="col-2" scope="col">
              Nome
            </th>
            <th className="col-2" scope="col">
              Razão Social
            </th>
            <th scope="col">Status da Conta</th>
            <th scope="col">Setor</th>
            <th scope="col">Segmento Atuacao</th>
            <th scope="col">Natureza Juridica</th>
            <th scope="col">Capital</th>
            <th scope="col">Funcionarios</th>
            <th className="text-center" scope="col">
              Ações
            </th>
          </tr>
        </thead>
        <tbody>
          {Search(currentAccounts, query, keys).map((account) => (
            <tr key={account.id}>
              <th>{account.id}</th>
              <td>{account.nome}</td>
              <td>{account.razaoSocial}</td>
              <td>{account.statusConta}</td>
              <td>{account.setor}</td>
              <td>{account.segmentoAtuacao}</td>
              <td>{account.naturezaJuridica}</td>
              <td>{account.capital}</td>
              <td>{account.funcionarios}</td>
              <td className="text-center">
                <Link
                  to={`edit/${account.id}`}
                  className="btn btn-outline-warning"
                >
                  Editar
                </Link>
                <button
                  onClick={() => deleteAccount(account.id)}
                  className="btn btn-outline-danger m-1"
                >
                  Deletar
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      <Pagination
        dadosPorPagina={accountsPerPage}
        totalDados={accounts.length}
        paginate={paginate}
      />
    </div>
  );
};

export default AccountShow;

Pagination组件代码 #

import React from "react";

const Pagination = ({ dadosPorPagina, totalDados, paginate }) => {
  const pageNumbers = [];

  for (
    let index = 1;
    index <= Math.ceil(totalDados / dadosPorPagina);
    index++
  ) {
    pageNumbers.push(index);
  }

  return (
    <div>
      <nav>
        <ul className="pagination">
          {pageNumbers.map((number) => (
            <li key={number} className="page-item">
              <a onClick={() => paginate(number)} href="" className="page-link">
                {number}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Pagination;

解决方案 #

问题根源在于Pagination组件中的<a>标签使用了href=""，点击时会触发浏览器默认的页面刷新行为，导致组件重新挂载，currentPage状态重置为初始值1。

修复方法1：阻止a标签的默认行为 #

修改Pagination组件中的<a>标签，在onClick事件中阻止默认导航行为：

<a 
  onClick={(e) => {
    e.preventDefault(); // 阻止页面刷新
    paginate(number);
  }} 
  className="page-link"
>
  {number}
</a>

修复方法2：替换为button标签（推荐，更符合语义） #

将<a>标签换成<button>标签，避免触发导航行为：

<li key={number} className="page-item">
  <button 
    onClick={() => paginate(number)} 
    className="page-link"
  >
    {number}
  </button>
</li>

两种方法都能避免页面刷新，保持currentPage的状态，解决页码跳转后立刻回退的问题。

内容的提问来源于stack exchange，提问作者Coimbra