Why there is no href="#" attribute by default?

[endze1t]

Is there a way to add href="#" to all items? I've tried with:

hrefBuilder={() => {
            return '#';
}}

But this add only to non active elements the href tag. The reason is why i want href on Items, that if you double click, that the numbers don't get marked.

[AdeleD]

For accessibility purposes. Why do you need to do that?

[geochanto]

@AdeleD if you're paginating with a custom server and router so each pagination link renders a new page, then having href attributes would definitely help

[MonsieurV]

Hi,

This is now possible thanks to the hrefAllControls prop.

Sample usage:

        <ReactPaginate
          ...
          hrefBuilder={(page, pageCount, selected) =>
            page >= 1 && page <= pageCount ? `/page/${page}` : '#'
          }
          hrefAllControls
        />

Note the pageCount and selected parameters that have been added to the hrefBuilder. Here it adds href of form /page/X to all enabled controls and active page and # to remaining (disabled prev / next buttons).

[datistpham]

Hello i want to assign per page to params of url ,it like this : localhost:3000/home/1 or localhost:3000/home/2, .... until end of page . how can i should do and can anyone help me for this ? thanks

[MonsieurV]

Hi @giangvippro,

You have an example just above. Add a prop hrefBuilder:

        <ReactPaginate
          ...
          hrefBuilder={(page, pageCount, selected) =>
            page >= 1 && page <= pageCount ? `/home/${page}` : '#'
          }
          hrefAllControls
        />

[DevZiya]

hi @MonsieurV I did as you said but the url does not change. The console also appears href = #

[MonsieurV]

@DevZiya could you provide a running example on a GitHub repo for your issue?

Thx

[DevZiya]

@DevZiya , sorununuz için GitHub deposunda çalışan bir örnek verebilir misiniz?

Teşekkürler

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import Navbar from "../../components/Navbar";
import { addToCart } from "../../Redux/cartRedux";
import ReactPaginate from "react-paginate";
import "./home.css";

const Home = () => {
const [books, setBooks] = useState([]);
const [searchArray, setSearchArray] = useState([]);
const [pageNumber, setPageNumber] = useState(0);
const search = useSelector((state) => state.search.search);
const dispatch = useDispatch();

useEffect(() => {
const getBooks = async () => {
const url = "https://api.itbook.store/1.0/new";
const res = await axios.get(url);
setBooks(res.data.books);
};
getBooks();
}, [search]);

useEffect(() => {
const getSearchBooks = async () => {
const url = https://api.itbook.store/1.0/search/${search};
const res = await axios.get(url);
const result = res.data.books;
setSearchArray(result);
};
getSearchBooks();
}, [search]);

const userPerPage = 10;
const pageVisited = pageNumber * userPerPage;
const displayUser = books.slice(pageVisited, pageVisited + userPerPage);
const pageCount = Math.ceil(books.length / userPerPage);

const changePage = ({ selected }) => {
setPageNumber(selected);
};

const handleCart = (book) => {
dispatch(addToCart({ ...book }));
};

return (
<>

  <div className="homecontainer">
    {searchArray
      ? searchArray.map((book) => (
          <div className="homecart" key={book.isbn13}>
            <div className="image">
              <img src={book.image} alt="img" />
            </div>
            <div className="title">
              <h2>{book.title.slice(0, 30)}</h2>
            </div>
            <div className="subtitle">
              <p>{book.subtitle}</p>
            </div>
            <div className="isbn">
              <span>{book.isbn13}</span>
            </div>
            <div className="price">
              <span>{book.price}</span>
              <button onClick={() => handleCart(book)}>ORDER NOW</button>
            </div>
          </div>
        ))
      : 
      <div className='displayUserContainer'>
      <div className='displayUser'>
        {
          displayUser.map((book) => (
            <div className="homecart" key={book.isbn13}>
              <div className="image">
                <img src={book.image} alt="img" />
              </div>
              <div className="title">
                <h2>{book.title.slice(0, 30)}</h2>
              </div>
              <div className="subtitle">
                <p>{book.subtitle}</p>
              </div>
              <div className="isbn">
                <span>{book.isbn13}</span>
              </div>
              <div className="price">
                <span>{book.price}</span>
                <button onClick={() => handleCart(book)}>ORDER NOW</button>
              </div>
            </div>
          ))
        }
      </div>
      <ReactPaginate
            previousLabel={"Previous"}
            nextLabel={"Next"}
            pageCount={pageCount}
            onPageChange={changePage}
            containerClassName={"paginationBtns"}
            previousLinkClassName={"previousBtn"}
            nextLinkClassNameLinkClassName={"nextBtn"}
            disabledClassName={"paginationDisabled"}
            activeClassName={"paginationActive"}
            renderOnZeroPageCount={null}
            hrefBuilder={(pageNumber, pageCount) =>
              pageNumber <= 3 && pageNumber <= pageCount ? `/page/${pageNumber}` : '#'
            }
            hrefAllControls
          />
      </div>
      }
  </div>
</>

);
};

export default Home;

[MonsieurV]

Well, certainly check your condition @DevZiya (pageNumber <= 3). Use console.log() to see what's going on.

This is not a bug in the library; and not the right place to help you debug your app. :)
https://en.reactjs.org/community/support.html