I'm trying to add the page number into the url (at the end of my useEffect function) but now navigating to a different page won't work anymore, every time I click page 2 just navigates back to page 1, can anyone see what I have done wrong here? I've added my Listcomponent, my pagination component and my 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; 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; 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; 
