React onClick事件中使用Redirect带参跳转失效如何解决？

问题原因 #

1. 你在handleClick事件回调中直接返回<Redirect>组件的写法完全无效：React Router的重定向组件只有被渲染到组件的返回DOM树中才会触发跳转，事件函数的返回值不会被纳入渲染逻辑。
2. 你写的event.preventDefault()位置错误：当搜索内容不为空时，代码会先走if分支return，永远执行不到阻止表单默认提交的逻辑，会导致页面直接刷新。
3. 如果你使用的是当前主流的React Router v6版本，<Redirect>组件本身已经被官方废弃移除，无法直接使用。

解决方案（推荐适配React Router v6） #

这是目前最常用的写法，直接用编程式导航钩子实现跳转：

1. 首先在Search组件顶部导入路由钩子：

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

2. 组件内部调用钩子获取导航方法，修改handleClick逻辑：

function Search() {
  const [searchTerm, setTerm] = useState("");
  const navigate = useNavigate(); // 新增这行获取导航方法

  function handleChange(event) {
    setTerm(event.target.value);
  }

  function handleClick(event) {
    // 先阻止表单默认提交行为，放在最前面
    event.preventDefault();
    if (searchTerm.length > 0) {
      // 直接调用navigate实现跳转，第二个参数传state参数
      navigate("/Results", { state: { searchTerm } });
    }
  }

  // 原有return内容保持不变
  return (
    <div>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid justify-content-end">
          <form class="d-flex">
            <input onChange={handleChange} value={searchTerm} class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
            <button onClick={handleClick} class="btn btn-outline-success">Search</button>
          </form>
        </div>
      </nav>
    </div>
  );
}

3. 在Results页面接收参数的方法：

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

function Results() {
  const location = useLocation();
  // 拿到传递的搜索参数
  const searchTerm = location.state?.searchTerm;
  // 后续业务逻辑
}

如果你使用的是React Router v5版本 #

可以用useHistory钩子实现相同效果：

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

function Search() {
  const [searchTerm, setTerm] = useState("");
  const history = useHistory();

  function handleClick(event) {
    event.preventDefault();
    if (searchTerm.length > 0) {
      history.push({
        pathname: "/Results",
        state: { searchTerm }
      });
    }
  }
  // 其余代码保持不变
}

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