使用 <Redirect> 组件更新当前页面的搜索参数

Question

我想在提交表单时更新 URL 中的单个搜索参数。作为 React 和 react-router 的新手，我想给 <Redirect> 组件一个机会，尽管我的直觉告诉我只需使用常规 JavaScript 更新 URL。

初始重定向按预期工作。但是，一旦查询更改，就会发生后续重定向。我只希望在按下提交时发生重定向。

export default function SearchForm () {
  const [ inputQuery, setInputQuery ] = useState<string>(useSearch('query') || '');
  const [ redirect, setRedirect ] = useState(false);

  function search (event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();

    setRedirect(true);
  }

  return (
    <div>
      <form onSubmit={search}>
        <label>
          Search query
          <input value={inputQuery} onChange={(event) => setInputQuery(event.target.value)} autoFocus />
        </label>

        <button type="submit">Search</button>
      </form>

      {redirect &&
        <Redirect to={`?query=${inputQuery}`} />
      }
    </div>
  );
}

• https://reacttraining.com/react-router/web/api/Redirect

Answer 1

您是否有理由将重定向组件与您的表单一起返回？如果你想在提交时重定向，我会使用 react 路由器中的withRouter，然后调用它的history.push()；

  function search (event: React.FormEvent<HTMLFormElement>) {
    props.history.push({pathname: '/whatever-page', search: '?query=' + inputQuery})
  }

  return (
    <div>
      <form onSubmit={search}>
        <label>
          Search query
          <input value={inputQuery} onChange={(event) => setInputQuery(event.target.value)} autoFocus />
        </label>

        <button type="submit">Search</button>
      </form>
    </div>
  );

export default withRouter(SearchForm);