Имеется две страницы - основная со списком элементов и страница с подробным описанием элемента. Используется реагирующий маршрутизатор.
<Switch>
<Route exact path="/" component={PokemonCardContainer} />
<Route path="/pokemon/:pokemonName" component={Pokemon} />
</Switch>
На главной странице со списком генерируется API-интерфейс запроса, который возвращает 20 элементов. Далее, когда мы достигаем конца списка, запрос API обновляется - загружаются еще 20 элементов и т. Д. c. 
Страница подробного описания реализуется кнопка «Я тебя выбираю!»
<Link to={`pokemon/${pokemonName}`}>
{pokemonName}, I Choose You!
</Link>
На странице подробного описания есть кнопка «Вернуться к дому»
const handleGoToHomePage = () => {
props.history.push({
pathname: "/",
});
};
Соответственно при нажатии вернуться на главную страницу , новый запрос API происходит, и я попадаю в начало страницы. но мне нужно, чтобы я вернулся к элементу списка, на который я нажал. Например, если я нажал на 60-й элемент, мне нужно вернуться к нему. Я так понимаю, что мне нужно прервать запрос API, когда я вернусь на главную?
/* States */
const [pokemons, setPokemons] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [currentPage, setCurrentPage] = useState(
"https://pokeapi.co/api/v2/pokemon"
);
const [nextPage, setNextPage] = useState("");
const [hasMore, setHasMore] = useState(false);
useEffect(() => {
let cancel;
const fetchData = () => {
setLoading(true);
setError(false);
Axios({
method: "GET",
url: currentPage,
cancelToken: new Axios.CancelToken((c) => (cancel = c)),
})
.then((res) => {
setPokemons((prevPokemons) => {
return [...prevPokemons, ...res.data.results];
});
setNextPage(res.data.next);
setHasMore(res.data.results.length > 0);
setLoading(false);
})
.catch((error) => {
if (Axios.isCancel(error)) return;
setError(true);
});
};
fetchData();
return () => cancel();
}, [currentPage]);