React Router 获取和修改 URL 中的查询参数

npm i react-router

import { Button } from "antd";
import { useLocation, useSearchParams } from "react-router";

export default function About() {
  const [searchParams, setSearchParams] = useSearchParams();
  const location = useLocation();
  return (
    <div>
      <h1>
        id: {searchParams.get("id")}, name: {searchParams.get("name")}
      </h1>
      <h1>hash: {location.hash}</h1>
      <Button
        type="primary"
        onClick={() => {
          searchParams.set("id", "123");
          setSearchParams(searchParams);
        }}
      >
        Button
      </Button>
    </div>
  );
}