我有一个文章组件,它显示了一个帖子列表。该列表是分页的,因此每页最多可以显示 10 个帖子。有一个“下一页”按钮,点击后会更新组件状态和相应的 url 参数,如下所示:
第 1 页:/新闻
第 2 页:/news?page=2
第 3 页:/news?page=3
...等等。的方式constructor()
和render()
方法的建立,它会读取这个URL参数,并显示正确的岗位如果用户导航直接/新闻?页= 3,例如。
我遇到的问题是浏览器的后退和前进按钮似乎没有重新呈现页面。因此,如果用户点击“下一页”按钮几次,然后点击后退按钮,URL 将更新,但页面不会重新呈现。有没有办法强迫它这样做?
我猜有一种方法可以通过添加 window.history 侦听器来完成此操作,但我不确定是否有推荐的做法与gatsby-link
.
这是组件的精简版本以供参考:
import React, { Component } from 'react';
import { navigateTo } from 'gatsby-link';
import getUrlParameter from '../functions/getUrlParameter';
export default class extends Component {
constructor(props) {
super(props);
/* external function, will grab value
* of ?page= url parameter if it exists */
const urlParamPage = getUrlParameter('page');
const currentPage = urlParamPage ? urlParamPage : 1;
this.state = {
currentPage
};
}
nextPage() {
const { props, state } = this;
const urlParam = state.currentPage > 1
? `?page=${state.currentPage}`
: '';
navigateTo(props.pathname + urlParam);
this.setState({currentPage: this.state.currentPage + 1});
}
render() {
const { props, state } = this;
const articles = props.articles
.slice(state.currentPage * 10, state.currentPage * 10 + 10);
return (
<div>
<ul>
{articles.map((article) => <li>{article.title}</li>)}
</ul>
<button onClick={() => this.nextPage()}>Next Page</button>
</div>
);
}
}