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 Router中的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);

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

1 个答案: