React组件location.search不更新：如何在Second组件获取实时URL参数？

问题根源 #

你直接通过window.history.replaceState修改URL，但React Router的useLocation并不会监听这种手动操作浏览器历史栈的行为，导致Second组件无法感知到URL参数的变化。

正确解决方案 #

使用React Router官方提供的路由操作方法（而非直接操作window.history），这样React Router会同步更新内部的路由状态，让useLocation能实时获取最新的URL参数。

针对React Router v6版本

修改First组件，使用useNavigate来更新URL：

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function FirstComponent() {
  const [searchBlogName, setSearchBlogName] = useState("");
  const navigate = useNavigate();

  useEffect(() => {
    const params = new URLSearchParams();
    if (searchBlogName) {
      params.set('q', searchBlogName);
    }
    // 用navigate修改URL，replace设为true对应replaceState的行为
    navigate({ search: params.toString() }, { replace: true });
  }, [searchBlogName, navigate])

  return (
    <input
      type="text"
      onChange={(e) => setSearchBlogName(e.target.value)}
    />
  )
}

Second组件保持原有代码即可，useLocation会自动感知到URL参数变化：

import { useLocation, useEffect } from 'react-router-dom';

function SecondComponent() {
  const location = useLocation()

  useEffect(() => {
    console.log(location.search);
  }, [location.search]);

  return <></>
}

针对React Router v5版本

修改First组件，使用useHistory来更新URL：

import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

function FirstComponent() {
  const [searchBlogName, setSearchBlogName] = useState("");
  const history = useHistory();

  useEffect(() => {
    const params = new URLSearchParams();
    if (searchBlogName) {
      params.set('q', searchBlogName);
    }
    history.replace({ search: params.toString() });
  }, [searchBlogName, history])

  return (
    <input
      type="text"
      onChange={(e) => setSearchBlogName(e.target.value)}
    />
  )
}

补充说明 #

• 你之前尝试的popstate监听方案无效，是因为replaceState/pushState不会触发popstate事件，该事件仅在点击浏览器前进/后退按钮时才会触发。
• 仅当使用React Router提供的API修改URL时，它才会同步更新内部维护的路由状态，进而触发useLocation的状态更新和组件重渲染。

内容的提问来源于stack exchange，提问作者Xmas