如何使用 React 路由器将数据从一个兄弟姐妹传递到另一个兄弟姐妹?

Question

我有一个带有提交按钮的搜索栏，可以从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？

Answer 1

你离得很近。您可以在 SearchResults 组件中使用来自 "react-router-dom"useLocation钩

子，如下所示

const { state } = useLocation();

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

Answer 2

使用：

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

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

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