如何在使用 React Router 提交表单时链接到特定页面

Question

我正在学习 React Router，我有一个简单的导航栏组件，其中有一个输入/搜索栏。单击搜索时，它将搜索 API，我想使用 React Router 路由到新页面（/results）以显示结果。

我希望在单击提交按钮时显示我的组件SearchResults。

这是我的代码：

const Search = () => {
  const apiKey = 'xxxxxx';
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    searchAPI();
  };

  const searchAPI = async () => {
    const res = await fetch(`http://www.omdbapi.com/?apikey=${apiKey}&s=${input}`);
    const data = await res.json();
    console.log(data);
  };

  return (
    <form>
      <input onChange={(e) => setInput(e.target.value)}></input>
      <Link to="/results">
        <button type="submit" onClick={handleSubmit}>
          search
        </button>
      </Link>
    </form>
  );
};

这些是我的路线：

function App() {
  return (
    <>
      <Router>
        <Nav />
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/results" component={SearchResults} />
      </Router>
    </>
  );
}

我希望<Link to="/results"> 在提交时自动链接到 /results 页面，但事实并非如此。任何帮助将不胜感激！

Answer 1

看起来您正在使用支持钩子的 React 版本。在这种情况下，您可以利用 react-router 中的 useHistory 钩子，它允许您以编程方式更改路由。

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

const Search = () => {
  const apiKey = 'xxxxxx';
  const [input, setInput] = useState('');
  const history = useHistory();

  const handleSubmit = (e) => {
    e.preventDefault();
    searchAPI();
    history.push("/results");
  };

  const searchAPI = async () => {
    const res = await fetch(`http://www.omdbapi.com/?apikey=${apiKey}&s=${input}`);
    const data = await res.json();
    console.log(data);
  };

  return (
    <form>
      <input onChange={(e) => setInput(e.target.value)}></input>
      <button type="submit" onClick={handleSubmit}>
        search
      </button>
    </form>
  );
};

react router 中的Link 组件在概念上只是一个锚标记。在这种情况下，该解决方案可能有效，但您必须改变搜索的工作方式。您可以有一个指向/results 的Link 组件，然后您的SearchResults 组件可以根据用户输入执行搜索。为了使其工作，您必须将input 的值传递给Link，以便您以后可以访问它。 Here are some ways you can pass extra data in the Link component.