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

Question

我正在尝试使用NextJS重建我的CRA网站，而我对此page有点困惑：

中间容器分为三部分：

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

它与CRA完美配合。 因此，使用NextJS，我做了以下工作： 对于每个索引项目，索引的列表具有一个链接组件，例如： "https://www.phidbac.fr/Liste-des-index/50"，

和页面/ Liste-des-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
  };
};

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

Github Repository

如何实现与CRA版本一样平滑的功能？

感谢您的帮助：D

编辑：

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

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

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

再次感谢：）

Answer 1

您在[id-name].js页面上使用的命名约定是Next.js的Dynamic routes功能的一部分。通过使用next/link for Dynamic routes稍微修改您的代码，我认为我成功实现了您的要求。

首先，您必须修改ListeIndex.tsx并将Link中的next/link组件与道具href和as一起使用（有关提供的链接的更多信息，上方和下方的评论）

// 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

...