时间戳

首页 > 解决方案 > 为什么返回时来自 React Router Dom 的链接不刷新？

javascript - 为什么返回时来自 React Router Dom 的链接不刷新？

问题描述

我正在为我的应用程序创建一个简单的分页，并且一切正常，直到我没有按下后退按钮。分页工作正常，但不会在后退或前进按钮上刷新。组件只是没有重新渲染。如何做到这一点？

<Route exact strict path="/page=:id" component={Home}></Route>

我的状态：

const [meetings, setMeetings] = useState([]);
  const [pageSize, setPageSize] = useState(3);
  const [currentPage, setCurrentPage] = useState(+match.params.id || 1);

用于渲染新数组的分页功能

const paginate = (items, pageNumber, pageSize) => {
    const startIndex = (pageNumber - 1) * pageSize;
    return _(items)
      .slice(startIndex)
      .take(pageSize)
      .value();
  };

  const paginatedMeetings = paginate(meetings, currentPage, pageSize);

并简单地渲染按钮

<Pagination
        itemsCount={meetings.length}
        pageSize={pageSize}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />

分页组件：

const Pagination = ({ itemsCount, pageSize, onPageChange, currentPage }) => {
  const pagesCount = Math.ceil(itemsCount / pageSize);
  if (pagesCount === 1) return null;

  const pages = _.range(1, pagesCount + 1);

  return (
    <div>
      {pages.map(page => (
        <StyledLink as={Link} to={`page=${page}`}>
          <StyledButton
            active={page === currentPage}
            onClick={() => onPageChange(page)}
            key={page}
          >
            {page}
          </StyledButton>
        </StyledLink>
      ))}
    </div>
  );
};

标签： javascriptreactjs

解决方案

您的组件可能没有重新安装，因此它的状态与您之前的状态保持一致。由于 match 是一个道具，因此您需要useEffect在 match 参数更改时运行效果，并更新您的本地状态。像这样的东西：

useEffect(() => {
  setCurrentPage(props.match.params.id);
}, [props.match.params.id]);

推荐阅读