React应用/search路由内复用搜索栏不刷新问题解决方案

问题由两处逻辑缺陷共同导致：

• 搜索栏组件的提交逻辑加了路径判断：当用户已经处于/search路由时，handleSearch方法里的if (location.pathname !== "/search")条件不成立，根本不会执行navigate调用，新输入的搜索关键词完全没有传递给搜索页。
• 搜索页的请求触发逻辑有问题：useEffect传入的依赖数组是空数组，只会在组件首次挂载时执行一次搜索请求。就算后续路由state更新了，组件也不会感知到变化、重新拉取结果。而且React Router在同路径导航时默认不会重新挂载页面组件，空依赖的副作用永远不会重新执行。

只需要修改两处代码即可解决当前问题：

• 修改SearchSection组件的提交逻辑，去掉路径拦截判断，无论当前在哪个路由都执行导航，把新的搜索词写入路由state：

const handleSearch = (event) => {
  event.preventDefault();
  // 去掉原有的路径判断，同路径下也更新路由state
  navigate("/search", { state: value, replace: location.pathname === "/search" });
};

加replace: true是为了避免同路径下重复提交搜索产生无用的历史记录栈。

• 修改Search页面的副作用依赖，让组件在搜索词变化时重新发起请求，同时解决闭包拿到旧state的问题：

useEffect(() => {
  const searchKeyword = location.state;
  // 空关键词提前返回，避免无效请求
  if (!searchKeyword) return;

  const headers = { Accept: "application/ld+json" };
  fetch(
    `http://localhost:1026/ngsi-ld/v1/entities?type=Sensor&q=refRoom~=.*${searchKeyword}`,
    { headers }
  )
    .then((response) => {
      if (response.ok) return response.json();
      throw response;
    })
    .then((data) => setResults(data))
    .catch((error) => {
      console.error("Error fetching data: ", error);
      setError(error);
    });
// 把location.state加入依赖数组，state变化时重新执行请求
}, [location.state]);

注意原来写在组件里的showResults函数可以直接移到useEffect内部，避免闭包引用旧的location值。

不推荐用路由state传递搜索参数，更好的实现是把搜索关键词放到URL的查询参数中，比如/search?keyword=xxx，这种方案的优势：

• 刷新页面、分享链接时搜索条件不会丢失
• 浏览器前进/后退可以正常回溯历史搜索记录
• 搜索状态完全和URL绑定，逻辑更可追溯，不会出现组件状态和路由不同步的问题

具体改造步骤：

• 修改SearchSection组件的提交逻辑，把关键词拼到URL查询参数里：

const handleSearch = (event) => {
  event.preventDefault();
  const trimmedValue = value.trim();
  if (!trimmedValue) return;
  navigate(`/search?keyword=${encodeURIComponent(trimmedValue)}`, {
    replace: location.pathname === "/search"
  });
};

用encodeURIComponent处理关键词是为了转义特殊字符，避免URL格式错误。

• 修改Search页面，用useSearchParams读取URL里的搜索词，监听关键词变化触发请求：

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

const Search = () => {
  const [results, setResults] = useState([]);
  const [error, setError] = useState(null);
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get('keyword');

  useEffect(() => {
    if (!keyword) {
      setResults([]);
      return;
    }
    const headers = { Accept: "application/ld+json" };
    fetch(
      `http://localhost:1026/ngsi-ld/v1/entities?type=Sensor&q=refRoom~=.*${encodeURIComponent(keyword)}`,
      { headers }
    )
      .then((response) => {
        if (response.ok) return response.json();
        throw response;
      })
      .then((data) => setResults(data))
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setError(error);
      });
  }, [keyword]);

  // 原有表格渲染逻辑保持不变即可
}

额外优化建议：可以给搜索请求加loading状态、加请求竞态处理（避免前一个慢请求覆盖后一个快请求的结果），交互体验会更流畅。

内容的提问来源于stack exchange，提问作者T.R