React中Select选择后如何用选中id无刷新更新页面URL

安全阿岳

2026-9-30

实现思路

核心用浏览器原生的 History API 实现无刷新修改URL，再补充页面初始化时读取URL参数的逻辑即可，分两步操作：

第一步：修改Select onChange逻辑，同步更新URL

这里分两种常用的参数存储方式，按需选择即可：

方式1：用查询参数存储（比如 URL 变成 `xxx?gameId=123`）

修改你的handleGameSelect代码，在请求完成后调用pushState更新URL：

const handleGameSelect = event => {
  const gameId = event.target.value;
  axios.get(`/games/${gameId}`).then(function (response) {
    const { game, backgrounds, categories } = response.data;
    setData({ game, backgrounds, categories });
    // 无刷新更新URL
    const newUrl = new URL(window.location);
    newUrl.searchParams.set('gameId', gameId);
    window.history.pushState({}, '', newUrl);
  });
};

方式2：用路径参数存储（比如 URL 变成 `/games/123`）

如果你的路由本身就是按 /games/:gameId 规则设计的，直接替换路径即可：

window.history.pushState({}, '', `/games/${gameId}`);

第二步：页面初始化时读取URL参数，优先加载对应数据

还要补充初始化逻辑，不然用户刷新页面还是会加载默认值：

useEffect(() => {
  // 读取查询参数的情况
  const urlParams = new URLSearchParams(window.location.search);
  const initGameId = urlParams.get('gameId') || games[0]?.id;
  // 如果是路径参数+使用React Router的情况，直接用路由钩子拿参数即可
  // const { gameId: initGameId } = useParams();

  // 初始化请求对应数据
  axios.get(`/games/${initGameId}`).then(function (response) {
    const { game, backgrounds, categories } = response.data;
    setData({ game, backgrounds, categories });
  });
  // 记得把FormSelectNative的defaultValue换成initGameId，保证下拉选中状态正确
}, [])