@aimer2/pager/src/withURLSearch.js

import React from "react";
import qs from "query-string";
import PropTypes from "prop-types";
export default WrappedComponent => {
	const WithURLSearch = class extends React.Component {
		static propTypes = {
			history: PropTypes.object.isRequired,
			location: PropTypes.object.isRequired,
		};

		componentDidUpdate(prevProps) {
			const { pageCount, currentPage } = this.props;
			if (
				prevProps.pageCount !== pageCount ||
				prevProps.currentPage !== currentPage
			) {
				if ("currentPage" in this.props) {
					this.addSearchParams(currentPage, pageCount);
				} else {
					this.addSearchParams(1, pageCount);
				}
			}
		}

		addSearchParams(page, pageCount) {
			const history = this.props.history;
			const location = this.props.location;
			const search = qs.parse(location.search);
			const newSearch = {
				page: page,
				pageCount: pageCount,
			};
			const stringified = qs.stringify(Object.assign(search, newSearch));
			history.push({ pathname: location.pathname, search: stringified });
		}

		wrapPageChange = page => {
			const onPageChange = this.props.onPageChange;
			this.addSearchParams(page, this.props.pageCount);
			onPageChange(page);
		};
		render() {
			const { onPageChange, history, pathname, ...rest } = this.props;

			return <WrappedComponent {...rest} onPageChange={this.wrapPageChange} />;
		}
	};
	WithURLSearch.displayName = `WithURLSearch(${getDisplayName(
		WrappedComponent,
	)})`;
	return WithURLSearch;
};
function getDisplayName(WrappedComponent) {
	return WrappedComponent.displayName || WrappedComponent.name || "Component";
}