React搜索按钮点击无响应 无法跳转/products路由问题排查

• 手动在地址栏访问/products/路径并拼接任意关键词时，可正常加载对应商品检索结果
• 点击页面上的搜索提交按钮无任何响应，不会触发路由跳转，无关键词场景下也不会跳转至/products路径
• 代码参照教程编写，相同实现在教程中可正常运行，暂不确定是否需要替换原生提交按钮为自定义Button组件

const Search = ({ history }) => {

const [keyword, setKeyword] = useState("");

const searchSubmitHandler = (e) => {
    e.preventDefault();
    if (keyword.trim()) {
        history.push(`/products/${keyword}`);
    } else{
        history.push("/products");
    }
};

return (
<Fragment>
<form className="searchBox" onSubmit={searchSubmitHandler}>
 <input
    type="text"
    placeholder="Search a Product ..."
    onChange={(e) => setKeyword(e.target.value)}
 />
 <input type="submit" value="Search" />
</form>
</Fragment>
);   
};
export default Search here

优先排查React Router版本问题（90%概率为该原因） #

不需要替换原生<input type="submit">按钮，表单的原生submit事件逻辑本身没有问题，故障核心是history对象未定义导致跳转逻辑执行时报错中断。

• 如果你使用的是React Router v6及以上版本：该版本已经移除了默认向组件注入history prop的逻辑，需要使用官方提供的useNavigate钩子实现跳转，修复后代码如下：

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

const Search = () => {
  const [keyword, setKeyword] = useState("");
  const navigate = useNavigate();

  const searchSubmitHandler = (e) => {
    e.preventDefault();
    const trimmedKeyword = keyword.trim();
    if (trimmedKeyword) {
      navigate(`/products/${trimmedKeyword}`);
    } else {
      navigate("/products");
    }
  };

  return (
    <Fragment>
      <form className="searchBox" onSubmit={searchSubmitHandler}>
        <input
          type="text"
          placeholder="Search a Product ..."
          onChange={(e) => setKeyword(e.target.value)}
        />
        <input type="submit" value="Search" />
      </form>
    </Fragment>
  );   
};
export default Search;

• 如果你使用的是React Router v5及以下版本：检查Search组件的渲染位置，如果组件是放在导航栏、页脚等非路由直接渲染的位置，组件无法直接拿到路由注入的history prop，需要用withRouter高阶组件包裹组件后再导出：

import { withRouter } from 'react-router-dom';
// 组件原有业务逻辑保持不变
export default withRouter(Search);

次要排查点 #

如果上述方案未解决问题，打开浏览器开发者工具切换到Elements面板，用元素选择器点页面上搜索按钮的位置：

• 如果选中的元素不是你写的submit input，说明按钮被其他透明元素遮挡，点击事件没有触发到提交按钮上，调整元素z-index层级即可。
• 切换到Console面板，点击搜索按钮查看是否有JS报错，根据报错信息定位对应逻辑问题即可。

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