在react中使用查询参数有什么意义？

import React from 'react';
import { useLocation } from 'react-router-dom';

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const searchQuery = queryParams.get('q');
  const pageNumber = queryParams.get('page') || 1;

  return (
    <div>
      <h1>Search Results for: {searchQuery}</h1>
      <p>Page: {pageNumber}</p>
      {/* 其他相关内容 */}
    </div>
  );
}

export default SearchResults;

import { useHistory } from 'react-router-dom';

function UpdateQueryParams() {
  const history = useHistory();

  function changePage(newPage) {
    const currentSearch = new URLSearchParams(history.location.search);
    currentSearch.set('page', newPage);
    history.push({ search: currentSearch.toString() });
  }

  return (
    <button onClick={() => changePage(3)}>Go to Page 3</button>
  );
}