React JS点击搜索结果Link无路由跳转，手动输入URL可正常访问

核心原因 #

• Searchclients组件未被包裹在Router的上下文中，导致Link组件无法获取路由实例，跳转逻辑不生效
• 搜索结果的Link被放在form标签内部，点击时触发了表单默认提交行为，阻断了路由跳转
• SuggestionsList作为子组件直接定义在Searchclients内部，每次父组件状态更新都会重建该子组件，导致内部的Link状态异常

具体修复步骤 #

步骤1：将Searchclients组件放到Router作用域内 #

修改nav.js的Home组件，引入并渲染Searchclients：

// nav.js 头部新增引入
import Searchclients from './serch.js' // 替换为你实际的文件路径

// 修改Home组件
function Home() {
  return (
    <div style={{ paddingTop: "20%", textAlign: "center" }}>
      <h1>Home</h1>
      <Searchclients />
    </div>
  );
}

步骤2：阻止form表单默认提交行为 #

修改serch.js里的form标签，添加onSubmit阻止默认事件：

<form 
  className="search-form" 
  style={{}}
  onSubmit={(e) => e.preventDefault()}
>

步骤3：将SuggestionsList组件移到Searchclients外部定义 #

避免每次父组件渲染重建子组件，调整serch.js的代码结构：

// 将SuggestionsList组件移到Searchclients外部定义
const SuggestionsList = (props) => {
  const {
    suggestions,
    inputValue,
    onSelectSuggestion,
    displaySuggestions,
    selectedSuggestion,
  } = props;

  if (inputValue && displaySuggestions) {
    if (suggestions.length > 0) {
      return (
        <ul className="suggestions-list" style={styles.ulstyle}>
          {suggestions.map((suggestion, index) => {
            const isSelected = selectedSuggestion === index;
            const classname = `suggestion ${isSelected ? "selected" : ""}`;
            return (
              <Link to={`/detiled/${suggestion.id}`} key={index}>
                <li
                  style={styles.listyle}
                  className={classname}
                >
                  {suggestion.firstname}
                </li>
              </Link>
            );
          })}
        </ul>
      );
    } else {
      return <div>No suggestions available...</div>;
    }
  }
  return <></>;
};

const Searchclients = () => {
  // 原有Searchclients的逻辑不变，删掉内部的SuggestionsList定义即可
}

可选校验 #

可以先在Link的点击事件里加日志确认点击被触发：

<Link 
  to={`/detiled/${suggestion.id}`} 
  onClick={() => console.log('点击跳转，目标路径：', `/detiled/${suggestion.id}`)}
>

完成以上修改后点击搜索结果的li即可正常跳转。

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