每次使用分页都会返回到第一页

Question

我的应用程序是一个在线书店(目前它运行在JS对象数据上(，如果书籍在每一页上显示，我想要特定的数量。但是我写的页码造成了问题。

虽然每次点击每个页面都会指向该页面，并显示相关卡片，但一秒钟后它会跳回显示第一页的内容。

应用程序：

import React,{useState, useMemo} from 'react'
import {Link} from 'react-router-dom'
import { useGlobalContext } from './context'
import Search from './Search'
import Pagination from './Pagination'
function Products() {

const {books, addBookToCart} = useGlobalContext() 
const[currentBook, setcurrentBook] = useState(1)         
const [BooksPerPage]  = useState(3)   
const lastIndex = currentBook*BooksPerPage
const firstIndex = lastIndex-BooksPerPage
const currentPage = books.slice(firstIndex,lastIndex)
function paginate(pagenumber){setcurrentBook(pagenumber)}


return (
<>
<Search></Search>
<div className='product-books'>
{currentPage.map((b)=> {

return <div  className='product-books-inner'>
<Link to= {`${b.slug}`}>{b.name}<div className='cart-item'>                 
<img src={b.img}></img></div> </Link>

<button className='clear-btn' onClick={()=>addBookToCart(b.slug)}>
add to cart</button>

<Link to= {`../container/${b.slug}`}><button>purchase</button></Link> </div> })}

<Pagination paginate={paginate} BooksPerPage={BooksPerPage} 
total= {books.length}></Pagination>
</div>
</>
)
}
export default Products

寻呼：

import React from 'react'
function Pagination({BooksPerPage, total , paginate} ) {
const pagenumbers = [ ]
for (let i = 1; i <= Math.ceil(total /BooksPerPage) ; i++) {
pagenumbers.push(i)
}
return (
<div>{pagenumbers.map((pn)=>(
<span> <a href='' onClick={()=> paginate(pn)}>{pn}</a></span>
))}</div>
)
}
export default Pagination

我在stack上发现了类似的主题，比如：分页：上一页的更改在切换回后消失或反应中的寻呼

但在我的申请中没有成功地执行来自的建议。感谢您的帮助。

Answer 1

现在您的页面每次都会重新加载，因为您有<a href=''>

用<Link>替换<a>并传递正确的to参数

或

用<button>替换<a>