Reactjs 将页码添加到url-反应分页

我试图将页码添加到url中（在useEffect函数的末尾），但现在导航到另一个页面将不再有效，每次单击第2页都会导航回第1页，有人能看到我在这里做错了什么吗？我添加了我的列表组件、分页组件和app.js

BooksList.js

import React, { useState, useEffect } from "react";

import queryString from "query-string";
import Books from "./Books";
import Pagination from "./Pagination";
import axios from "axios";
import { useHistory, useLocation } from "react-router-dom";

import { Container } from "react-bootstrap";

const BooksList = () => {
  const location = useLocation();
  const history = useHistory();
  const path = window.location.pathname;
  const initialQueryString = queryString.parse(location.search);
  const initialPageNumber = Number(initialQueryString.page) || 1;

  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [currentPage, setCurrentPage] = useState(initialPageNumber);
  const [booksPerPage, setBooksPerPage] = useState(5);

  useEffect(() => {
    const fetchBooks = async () => {
      try {
        setError(false);
        setLoading(true);
        const res = await axios.post("http://nyx.vima.ekt.gr:3000/api/books");

        setBooks(res.data.books);

        setLoading(false);
      } catch (err) {
        console.log(err);
        setError(true);
        setLoading(false);
        setBooks([]);
      }
    };

    fetchBooks();
    history.push(`${path}?page=${currentPage}`);
  }, [currentPage, history, path]);

  const indexOfLastBook = currentPage * booksPerPage;
  const indexOfFirstBook = indexOfLastBook - booksPerPage;
  const currentBooks = books.slice(indexOfFirstBook, indexOfLastBook);
  const paginate = pageNumber => setCurrentPage(pageNumber);

  if (error) return <div>Error message</div>;

  return (
    <Container>
      <Books books={currentBooks} loading={loading} />
      <Pagination
        booksPerPage={booksPerPage}
        booksAmount={books.length}
        paginate={paginate}
      />
    </Container>
  );
};

export default BooksList;

import React，{useState，useffect}来自“React”；
从“查询字符串”导入查询字符串；
从“/Books”导入书籍；
从“/Pagination”导入分页；
从“axios”导入axios；
从“react router dom”导入{useHistory，useLocation}；
从“react bootstrap”导入{Container}；
常量列表=（）=>{
const location=useLocation（）；
const history=useHistory（）；
const path=window.location.pathname；
const initialQueryString=queryString.parse（location.search）；
const initialPageNumber=编号（initialQueryString.page）| 1；
const[books，setBooks]=useState（[]）；
const[loading，setLoading]=useState（false）；
const[error，setError]=useState（null）；
const[currentPage，setCurrentPage]=使用状态（initialPageNumber）；
const[booksPerPage，setBooksPerPage]=useState（5）；
useffect（（）=>{
const fetchBooks=async（）=>{
试一试{
设置错误（假）；
设置加载（真）；
const res=等待axios.post（“http://nyx.vima.ekt.gr:3000/api/books");
setBooks（res.data.books）；
设置加载（假）；
}捕捉（错误）{
控制台日志（err）；
设置错误（真）；
设置加载（假）；
挫折（[]）；
}
};
取书（）；
push（`${path}？page=${currentPage}`）；
}，[currentPage，history，path]）；
const indexOfLastBook=currentPage*booksPerPage；
const indexOfFirstBook=indexOfLastBook-booksPerPage；
const currentBooks=books.slice（indexOfFirstBook，indexOfLastBook）；
const paginate=pageNumber=>setCurrentPage（pageNumber）；
if（error）返回错误消息；
返回(
);
};
导出默认列表；

Pagination.js

import React from "react";

const Pagination = ({ booksPerPage, booksAmount, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i < Math.ceil(booksAmount / booksPerPage); i++) {
    pageNumbers.push(i);
  }

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

export default Pagination;

从“React”导入React；
常量分页=（{booksPerPage，booksAmount，paginate}）=>{
常量页码=[]；
for（设i=1；i
{pageNumbers.map（number=>{
返回(


);
})}

);
};
导出默认分页；

App.js

import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import BooksList from "./components/BooksList";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={BooksList} />
        <BooksList />
      </Switch>
    </Router>
  );
};

export default App;

导入“/App.css”； 从“react Router dom”导入{BrowserRouter as Router，Route，Switch}； 从“/components/BooksList”导入BooksList； 常量应用=（）=>{ 返回( ); }; 导出默认应用程序；

---

在Pagination.js的onClick方法中添加此行：

e.preventDefault();

代码如下：

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

返回(

{pageNumbers.map（（number）=>{
返回(


);
})}

);
};

---

基本上，每次单击按钮，页面都会重新呈现/刷新，所有数据都会丢失。因此，您的页面将返回默认设置。

如果您觉得答案有用，请您对其进行更新投票：）我做了！但是我没有15个名声，所以不能记录下来。你可以接受这样正确的答案：谢谢。它非常有用，帮助我解决问题。RogerBanks和@Muhammad Ali