React Router v6 URL 参数变化导致组件重新渲染的解决方案

如果您使用 React Router v6，那么在版本 v6 中，路由参数不再被视为组件的 props，因此使用 memo 并不能阻止组件重新渲染。

为了在 URL 参数变化时避免重新获取 teamInfo，您可以使用 React Query 或其他数据管理库来缓存和管理数据。React Query 是一个非常流行的库，用于管理数据获取和缓存。

以下是使用 React Query 的示例代码：

1. 首先，确保您已经安装并导入了 React Query 库。

npm install react-query

import { useQuery } from 'react-query';

function Page() {
  const { id, tid } = useParams();
  
  // 使用 useQuery hook 来获取 teamInfo 数据，并缓存在 React Query 中
  const { data: teamInfo, isLoading } = useQuery(['teamInfo', tid], () => fetchTeamInfo(tid));

  if (isLoading) {
    return <div>Loading...</div>;
  }

  // 渲染页面
  return (
    <div>
      <h1>Team Info</h1>
      <p>Team ID: {id}</p>
      <p>Task ID: {tid}</p>
      <p>Team Name: {teamInfo.name}</p>
      {/* 其他页面内容 */}
    </div>
  );
}

// 从服务器获取 teamInfo 数据的函数
async function fetchTeamInfo(tid) {
  const response = await fetch(`/api/team/${tid}`);
  const data = await response.json();
  return data;
}

在这个示例中，我们使用了 React Query 的 useQuery hook 来获取 teamInfo 数据。使用 'teamInfo' 和 'tid' 作为查询键，这样当 'tid' 改变时，React Query 会自动重新获取数据。如果数据已经存在于缓存中，React Query 将从缓存中提供数据，而不会触发新的网络请求。只有在数据不在缓存中或缓存过期时，React Query 才会发起新的请求。

希望这个示例能帮助到您！如果您仍然遇到问题，请提供更多的代码和错误信息，以便我们更好地帮助您解决问题。