在路由更改Next.js上更改状态

import React from 'react';

const MyPage = ({ data }) => {
  // 页面渲染逻辑
};

MyPage.getInitialProps = async ({ query }) => {
  // 根据路由参数query获取数据
  const data = await fetchData(query.id);

  // 返回数据作为props传递给页面组件
  return { data };
};

export default MyPage;

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

const MyPage = () => {
  const router = useRouter();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // 根据路由参数router.query获取数据
      const res = await fetch(`/api/data?id=${router.query.id}`);
      const data = await res.json();

      // 更新状态
      setData(data);
    };

    fetchData();
  }, [router.query.id]);

  // 页面渲染逻辑
};

export default MyPage;