Javascript NextJS-动态路由，在一个页面上具有多个获取

我正试图用NextJS重建我的CRA网站，我有点被困在这一点上：

中间容器由3部分组成：

• 信件清单（没问题）
• 索引列表（只有1次获取才能获取列表）
• 所选索引的描述（每次用户在列表中选择新的索引时，此索引都会更改）

与CRA配合使用效果非常好。 因此，对于NextJS，我做了以下工作： 索引列表对于每个索引项都有一个链接组件，例如：

”https://www.phidbac.fr/Liste-des-index/50“

以及pages/listedes index文件夹中的文件[id].js：

//获取列表和每个新选择的描述

const Indexes = ({ listeIndex, cours, id }) => {
  return (
    <>      
      <Layout>
        <PageIndex listeIndex={listeIndex} id={id} cours={cours} />
      </Layout>
    </>
  );
};

export default Indexes;

Indexes.getInitialProps = async ({ req }) => {

// Get the correct ID Description from URL
  let id = req.url;
  id = id.split("/")[2];

  const res = await fetch("https://www.phidbac.fr:4000/Indexes");
  const dataList = await res.json();
  const res1 = await fetch(`https://www.phidbac.fr:4000/Indexes/${id}`);
  const dataDescription = await res1.json();

  return {
    listeIndex: dataList,
    cours: dataDescription,
    id: id
  };
};

const index=（{listedindex，cours，id}）=>{
返回(
);
};
导出默认索引；
index.getInitialProps=异步（{req}）=>{
//从URL获取正确的ID描述
让id=req.url；
id=id.split（“/”[2]；
const res=等待获取（“https://www.phidbac.fr:4000/Indexes");
const dataList=await res.json（）；
const res1=等待提取(`https://www.phidbac.fr:4000/Indexes/${id}`）；
const dataDescription=wait res1.json（）；
返回{
ListIndex:dataList，
课程：数据描述，
id:id
};
};

它正在工作，但是这个页面在每次点击时都会完全重新加载，所以速度很慢，显然不是一个好的解决方案

我如何才能实现CRA版本那样流畅的目标？

谢谢你的帮助：D

编辑：

在这个屏幕截图上，您可以看到单击和页面加载之间的延迟，以及滚动容器返回到开头

我只是尝试不刷新每次单击的索引列表，而只是从右侧更改描述

如果你想试试，我已经用你的解决方案编辑了git

---

再次感谢：）

您对

[id name].js使用的命名约定是Next.js功能的一部分。通过稍微修改您的代码，使用，我想我成功地实现了您的要求


首先，您必须修改
listedindex.tsx
，并使用
next/Link
中的
Link
组件和道具
href
和
as
（更多信息请参见上面提供的链接和下面的评论）

//listedindex.tsx
从“下一个/链接”导入链接
//const{Link}=路由；
...
...

然后，您只需要修改您的
[id name].tsx
，并在
query
而不是
req
下查看数据

/[id name].tsx
...
index.getInitialProps=异步（{query}:any）=>{
const id=query['id-name'].split（“-”[0]；//您应该在'query'参数下找到数据
...
您为
[id name].js使用的命名约定是Next.js功能的一部分。通过使用稍微修改您的代码，我想我已经实现了您的要求


首先，您必须修改
listedindex.tsx
，并使用
next/Link
中的
Link
组件和道具
href
和
as
（更多信息请参见上面提供的链接和下面的评论）

//listedindex.tsx
从“下一个/链接”导入链接
//const{Link}=路由；
...
...

然后，您只需要修改您的
[id name].tsx
，并在
query
而不是
req
下查看数据

/[id name].tsx
...
index.getInitialProps=异步（{query}:any）=>{
const id=query['id-name'].split（“-”[0]；//您应该在'query'参数下找到数据
...
非常感谢您的帮助！：D不幸的是，即使进行了这些更改，我仍然需要重新加载。网络选项卡已确认加载。如果您滚动第二部分（索引列表）然后选择另一个，你可以看到完整的重新加载。我不确定哪一个是第二部分。你能给我一个例子吗？我从
http://localhost:3000/Liste-des index
似乎使客户端导航不需要重新加载整个页面。请确保您已按照我的建议更改了代码。您不应该面临任何问题列表问题。请注意，我更改了
链接
组件的导入。我正在使用
下一个/Link
提供的组件使其正常工作。如果您仍然存在问题，请将代码推到您的回购上，以便我可以查看它。我刚刚看到了您的新提交。请查看您的代码。
href
不应该这样做是一个动态道具，但它应该指向您想要控制的文件，就像我在上面所做的那样：
href=“/Liste des index/[id name]”
，而在prop
上，您提供了详细信息。如果您更改此行，所有内容都应按预期工作MG，我刚刚理解，它工作了！我对链接组件有了更好的理解，再次感谢！非常感谢您的帮助！：D不幸的是，即使进行了这些更改，我也完全重新加载了..网络tabs向我确认加载。如果滚动第二部分（索引列表）然后选择另一个，你可以看到完整的重新加载。我不确定哪一个是第二部分。你能给我一个例子吗？我从
http://localhost:3000/Liste-des index
似乎使客户端导航不需要重新加载整个页面。请确保您已按照我的建议更改了代码。您不应该面临任何问题列表问题。请注意，我更改了
链接
组件的导入。我正在使用
下一个/Link
提供的组件使其正常工作。如果您仍然存在问题，请将代码推到您的回购上，以便我可以查看它。我刚刚看到了您的新提交。请查看您的代码。
href
不应该这样做是动态道具，但它应该指向您想要的文件