如何使用 React Router 将数据从一个兄弟姐妹传递到另一个兄弟姐妹？答案

【问题标题】：How do I pass data from one sibling to another using React Router?如何使用 React Router 将数据从一个兄弟姐妹传递到另一个兄弟姐妹？
【发布时间】：2020-07-08 14:40:36
【问题描述】：

我有一个带有提交按钮的搜索栏，它从 API 获取数据，所有这些都位于一个固定的导航栏中。每次点击提交时，我都希望 React Router 切换到结果页面，并显示结果。

我似乎无法弄清楚如何将数据作为道具或状态传递给这个新组件。这是我的搜索 API 代码：

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

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

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

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

这是我的结果组件中的代码：

const SearchResults = () => {
  const [results, setResults] = useState([]);
  return (
    <div>
      <h1>RESULTS</h1>
      {results.map((result) => {
        return <li key={results.Search.imdbID}>{result.Search.Title}</li>;
      })}
    </div>
  );
};

如何将我的搜索 API 组件中的 items 中的数据获取到我的结果组件中的 results 中？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

你离得很近。您可以像这样在 SearchResults 组件中使用来自“react-router-dom”的useLocation 钩子

const { state } = useLocation();

您从链接传递的项目将在那里。

【讨论】：

【解决方案2】：

用途：

<Link to="results" myData={{ state: items }}>

在结果组件中，您可以访问参数：

import {useRouteMatch} from 'react-router-dom'
const {params} = useRouteMatch();

console.log(params.myData);

【讨论】：