reactjs v18 router v6 URL 为 teamidtaskstid用的同一个Pagejsx 当tid变化时Pagejsx中的teamInfo 还是会重新从服务器上获取使用memo也不管用

如果您使用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才会发起新的请求。

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