Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
906 views
in Technique[技术] by (71.8m points)

pagination - On page refresh it goes back to page 1

I am building a blog with next.js and contentful. I am using pagination for blog posts. During development, if I am on page "/blog/?page=3" on page refresh it still shows the current page, but in production, if I refresh page it redirects to first page "/blog/?page=1"

Here is the code.

  const Homepage = (props) => {
  const router = useRouter();
  const [page, updatePage] = useState(props.page);

  const calculateRange = (length) => Array.from({ length }, (v, k) => k + 1);
  const rangeLimit = Math.ceil(props.total / props.limit);
  const range = calculateRange(rangeLimit);

  useEffect(() => {
    router.push({ pathname: "/blog", query: { page } });
  }, [page]);

  return (
    <Layout SEO={seoConfig}>
      <ContentfulPosts posts={props.entries} />
      <div className="pagination">
        <Paginator
          handlePaginationChange={(event) => updatePage(event)}
          range={range}
          skip={page}
        />
      </div>
    </Layout>
  );
};

Homepage.getInitialProps = async ({ query: { page = 1 } }) => {
  if (page) {
    page = parseInt(page);
  }

  const pglimit = 3;
  const { entries, total, skip, limit } = await fetchEntries({
    limit: pglimit,
    skip: (page - 1) * pglimit,
  });

  return {
    page,
    entries,
    total,
    skip,
    limit,
  };
};

export default Homepage;

I dont know why it is working fine in development but not in production. How to solve it?

question from:https://stackoverflow.com/questions/65908442/on-page-refresh-it-goes-back-to-page-1

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...