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

Question

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

中间容器分为三个部分：

• 信件列表（没问题）
• <（仅获取1次即可获得列表）所选索引的描述（每当用户在列表中选择新的
• index
时此更改）与CRA完美配合。因此，使用NextJS，我做了以下工作：对于每个索引项目，

index

列表具有一个链接组件，例如："https://www.phidbac.fr/Liste-des-index/50"，和文件

[id] .js

在pages / Liste-des-index文件夹中：//获取每个新选择的列表和描述

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

我正在尝试使用NextJS重建我的CRA网站，但我对此页面有些卡住：中间容器包含3个部分：字母列表（没问题）索引列表（仅获取1个即可获取列表） ...

Answer 1

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