防止react路由器在按back按钮时重新加载API调用。Reactjs

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function MyComponent() {
  const { id } = useParams();
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;

    fetch(`https://api.example.com/data/${id}`)
      .then(response => response.json())
      .then(data => {
        if (isMounted) {
          setData(data);
        }
      });

    return () => {
      isMounted = false;
    };
  }, [id]); // 仅在id变化时重新执行

  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}

import React, { useCallback, useState } from 'react';
import { useParams } from 'react-router-dom';

function MyComponent() {
  const { id } = useParams();
  const [data, setData] = useState(null);

  const fetchData = useCallback(() => {
    fetch(`https://api.example.com/data/${id}`)
      .then(response => response.json())
      .then(setData);
  }, [id]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}

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

function MyComponent() {
  const history = useHistory();
  const [data, setData] = useState(null);

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      if (action === 'POP') {
        // 处理后退操作，避免重新加载数据
      }
    });

    return () => {
      unlisten();
    };
  }, [history]);

  // 其他逻辑...
}