React点击搜索结果li标签Link组件不跳转URL无变化问题咨询

核心原因 #

• 你将SuggestionsList组件定义在Searchclients组件内部，父组件每次因输入触发重渲染时，SuggestionsList都会被重新实例化，导致组件内部的Link无法关联到React Router的上下文，跳转逻辑失效
• 搜索外层包裹了无提交阻止逻辑的form标签，点击元素时可能触发表单默认提交行为，打断路由跳转

修复方案 #

方案1：将SuggestionsList移到组件外部（推荐） #

把SuggestionsList组件的定义挪到Searchclients组件外面，需要的参数通过props传递即可，修改后代码示例：

// 移到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 = () => {
  // 原有逻辑不变
  // ...
}

同时修改form标签，阻止默认提交：

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

方案2：改用history.push跳转（无需调整组件嵌套结构） #

你已经在父组件引入了useHistory，可以把history通过props传给SuggestionsList，点击li时触发跳转即可，修改示例：

// 父组件传history
<SuggestionsList
  history={history}
  inputValue={inputValue}
  selectedSuggestion={selectedSuggestion}
  onSelectSuggestion={onSelectSuggestion}
  displaySuggestions={displaySuggestions}
  suggestions={filteredSuggestions}
/>

// SuggestionsList里替换Link为点击跳转
<li
  style={styles.listyle}
  key={index}
  className={classname}
  onClick={() => props.history.push(`/detiled/${suggestion.id}`)}
>
  {suggestion.firstname}
</li>

两种方案任选其一即可修复跳转问题，你手动输入地址可以正常访问，说明路由配置和路径拼写都是正确的，不需要调整路由代码。

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