Javascript 当按下后退按钮时，防止react路由器重新加载API调用。反应

共有两个页面，一个是包含元素列表的主页面，另一个是包含元素详细描述的页面。用过的路由器

<Switch>
    <Route exact path="/" component={PokemonCardContainer} />
    <Route path="/pokemon/:pokemonName" component={Pokemon} />
</Switch>

因此，当我按return键返回主页面时，会出现一个新的api请求，我会进入页面顶部。但是我需要返回到我单击的列表的元素。例如，如果我单击了第60个元素，我需要返回到它。我知道我需要在返回到main时中断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]);

---

我认为有两种可能性

在未卸载的父组件（例如菜单或主组件）中进行API调用

---

或者您使用类似的方法将数据保存在存储中。如果您的应用程序很复杂，需要处理组件之间共享的复杂状态，我会选择此选项。

我认为有两种可能性

在未卸载的父组件（例如菜单或主组件）中进行API调用

---

或者您使用类似的方法将数据保存在存储中。如果您的应用程序很复杂，需要处理组件之间共享的复杂状态，我会选择此选项。

谢谢您的评论！我刚开始学习react.js，还没有学习redux）我的应用程序是最简单的。在

PokemonCardContainer

中，发生一个api请求，形成一个新数组，并使用

map（）构建元素列表（
）

在此基础上。我需要在上面的某个地方使用api吗？但是我没有上面的组件。你可以在路由器组件中使用它吗？然后你可以使用render Prop将结果作为参数传递。我创建了一个新组件，在其中发出了api请求。在其中插入了路由，传递了参数。

（）}/>

。返回后，不会出现新的请求。但是页面会跳到开头。感谢评论！我刚刚开始学习react.js，还没有学习redux），我的应用程序是最简单的。在

PokemonCardContainer

内部，会发生一个api请求，形成一个新数组，并在此基础上使用

map（）

构建元素列表（

）。我需要在上面的某个地方做api吗？但是我没有上面的组件。你能在你的路由器组件中做吗？然后，您可以使用render propI将结果作为参数传递。创建了一个新组件，并在其中发出了API请求。在其中插入路由，传递参数<代码>（）}/>。返回后，不会出现新的请求。但是页面跳到了开头。

const handleGoToHomePage = () => {
    props.history.push({
    pathname: "/",
   });
 };

      /* 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]);