NextJS - 在一页上进行多次提取的动态路由

Question

我正在尝试使用 NextJS 重建我的 CRA 网站，但我有点卡在这个 page :

中间容器有 3 个部分：

信件列表（没问题）
index 的列表（只需 1 次获取即可获得列表）
对 selected 索引的描述（每次用户 select 在列表中创建一个新的 index 时都会更改）

它与 CRA 完美配合。所以，对于 NextJS，我做了以下事情： index 的列表对于每个索引项都有一个 link 组件，例如： "https://www.phidbac.fr/Liste-des-index/50",

和一个文件 [id].js 在 pages/Liste-des-index 文件夹中：

// 在每个新的 select

上获取列表和描述

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
  };
};

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

Github Repository

怎样才能像CRA版一样流畅？

感谢您的帮助:D

编辑：

在此屏幕截图中，您可以看到点击和页面加载之间的延迟，以及滚动容器返回到开头。

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

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

再次感谢:)

Answer 1

您为 [id-name].js 页面使用的命名约定是 Dynamic routes feature of Next.js. By slightly modifying your code, using next/link for Dynamic routes 的一部分，我想我已经达到了您的要求。

首先，您必须修改 ListeIndex.tsx 并使用 next/link 中的 Link 组件以及道具 href 和 as（更多信息请访问link 在上面和下面的评论中提供）

// ListeIndex.tsx

import Link from 'next/link'
// const { Link } = routes;

...

<Link
  key={element.id}
  prefetch={false}
  href="/Liste-des-index/[id-name]" // `href` points to page [id-name].js
  as={`/Liste-des-index/${element.id}-${element.nom // `as` holds the data you need to pass
    .replace(/\u202f/g, "-") 
    .replace(/\//g, "-")}`}> 

...

然后，你只需要修改你的 [id-name].tsx，并期望你的数据在 query 而不是 req

// [id-name].tsx

...

Indexes.getInitialProps = async ({ query }: any) => {
  const id = query['id-name'].split("-")[0]; // you should find your data under `query` parameter

...

NextJS - 在一页上进行多次提取的动态路由

NextJS - Dynamic Routing with multiple fetch on 1 Page

javascript

reactjs

routing

fetch

next.js