[英]NextJS - Dynamic Routing with multiple fetch on 1 Page
I'm trying to rebuild my CRA Website with NextJS and I'm a little stuck on this page :我正在尝试使用 NextJS 重建我的 CRA 网站,但我有点卡在这个页面上:
The middle container has 3 parts :中间容器有 3 个部分:
It works perfectly fine with CRA.它与 CRA 完美配合。 So, with NextJS, I did the following : The list of index has, for each index item, a link component to, for example:
"https://www.phidbac.fr/Liste-des-index/50"
,所以,用NextJS,我做了以下内容:指标的列表中有,每个索引项,链接组件,例如:
"https://www.phidbac.fr/Liste-des-index/50"
,
and a file [id].js in pages/Liste-des-index folder :和 pages/Liste-des-index 文件夹中的文件[id].js :
// fetch List and Description on each new 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
};
};
It's working, but this page does a complete reloading on each click, so it's slow and clearly not a good solution.它正在工作,但此页面在每次点击时都会完全重新加载,因此速度很慢,显然不是一个好的解决方案。
How can I achieve something as smooth as the CRA version ?我怎样才能实现像 CRA 版本一样流畅的东西?
Thanks for helping :D感谢您的帮助:D
EDIT :编辑 :
On this screenshot, you can see the delay between click and page loading, and the scroll container returning to the beginning.在此屏幕截图中,您可以看到单击和页面加载之间的延迟,以及滚动容器返回到开头。
I just try to don't refresh the index list on each click and just change the description from the right side.我只是尽量不要在每次点击时刷新索引列表,而只是从右侧更改描述。
I've edited the git with your solution if you wanna try.如果您想尝试,我已经用您的解决方案编辑了 git。
Thanks again :)再次感谢 :)
The naming convention you are using for your [id-name].js
page, is part of the Dynamic routes feature of Next.js.您用于
[id-name].js
页面的命名约定是 Next.js 的动态路由功能的一部分。 By slightly modifying your code, using next/link
for Dynamic routes , I think I managed to achieve what you requested.通过稍微修改您的代码,将
next/link
用于 Dynamic routes ,我想我设法实现了您的要求。
At first, you have to modify ListeIndex.tsx
and use Link
component from next/link
with props href
and as
(more about it on the link provided above and on the comments below)首先,您必须修改
ListeIndex.tsx
并使用来自next/link
Link
组件与 props 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, "-")}`}>
...
Then, you just need to modify your [id-name].tsx
, and expect your data under query
instead of req
然后,你只需要修改你的
[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
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.