React在线书店分页点击后自动跳回首页问题求助

问题根源 #

问题出在Pagination组件的<a>标签上：<a href='' onClick={()=> paginate(pn)}>中，href=''会触发浏览器默认的页面刷新行为，导致组件重新初始化，currentBook回到初始值1，所以页面自动跳回首页。

解决方案 #

方案一：阻止a标签的默认刷新行为

修改Pagination组件的点击事件，添加e.preventDefault()阻止默认动作：

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={(e)=> {
              e.preventDefault();
              paginate(pn);
            }}>{pn}</a>
          </span>
    ))}</div>
  )
}

export default Pagination

方案二：替换a标签为语义化元素（推荐）

分页按钮本质是交互控件，不是跳转链接，直接用<button>或<span>替代<a>，从根源避免默认刷新：

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 style={{cursor: 'pointer', margin: '0 8px'}}>
            <button 
              onClick={()=> paginate(pn)}
              style={{border: 'none', background: 'transparent', cursor: 'inherit'}}
            >{pn}</button>
          </span>
    ))}</div>
  )
}

export default Pagination

两种方案都能解决页面自动跳转的问题，方案二更符合单页应用的交互逻辑，也更语义化。

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