SSR应用程序，但客户端上的React路由器导航无法获取数据并中断页面

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data}</div>;
}

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

function MyComponent({ data }) {
  return <div>{data}</div>;
}

export default MyComponent;

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

function MyComponent() {
  const [data, setData] = useState(null);
  const location = useLocation();

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, [location]);

  if (!data) return <div>Loading...</div>;

  return <div>{data}</div>;
}