react-js-paginationを使用してWebアプリケーションでページネーションを作成しようとしています。ページネーションがウェブページに表示されていますが、のようなページ番号に従ってURL内のページパラメータを変更したいと思います&page=4。使ってみました
this.props.history.push(`${window.location.search}&page=${pageNumber}`)
しかし、これは&page=4ページネーションのリンクをクリックするたびに追加されます。私はURLを更新するこの間違った方法を知っています。URLのpageNumberに従ってページパラメータのみを更新するにはどうすればよいですか？
handlePageChange = (pageNumber) => {
this.setState({activePage: pageNumber});
this.props.history.push(`${window.location.search}&page=${pageNumber}`)
}
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={100}
onChange={this.handlePageChange}
/>
location.pathname代わりにを使用することもできますlocation.searchが、他のすべてのクエリパラメータも削除されます。
したがって、必要な他のパラメーターがあり、pageパラメーターのみを変更したい場合は、URLSearchParamsjavascriptオブジェクトを使用して、現在のページネーションを簡単に置き換えることができます。
したがって、次のようにします。
すべてのパラメータを含む現在のURLを含む新しい変数を作成します。
let currentUrlParams = new URLSearchParams(window.location.search);
次に、ページパラメータをその変数で必要な値に変更します。
currentUrlParams.set('page', pageNumber);
次に、次を使用して新しいパラメータで現在のURLをプッシュしますhistory.push。
this.props.history.push(window.location.pathname + "?" + currentUrlParams.toString());
したがって、完全なコードは次のようになります。
let currentUrlParams = new URLSearchParams(window.location.search);
currentUrlParams.set('page', pageNumber);
this.props.history.push(window.location.pathname + "?" + currentUrlParams.toString());
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加