代码之家 › 专栏 › 技术社区 › Rain Man

Next.js动态路由模板

nextjs-dynamic-routing next.js

Rain Man · 技术社区 · 3 年前

我想为我的next.js项目创建一个动态路由结构,所以主目录是 countries 该目录下还有许多其他国家。

www.mysite.com/countries
www.mysite.com/countries/united-states
www.mysite.com/countries/france
www.mysite.com/countries/united-kingdom
....

在我的页面文件夹中,我创建了一个名为 国家 并创建了一个文件 [...slug].js 。我必须创建一个文件 index.js 内部 国家 的文件夹 www.mysite.com/countries 以便于访问。

问题是 index.js 和 […鼻涕虫].js 有相同的代码,我只想维护一个文件。如何配置nextjs以使用 […鼻涕虫].js 对于 www.mysite.com/countries 下面有子页面吗?

0 回复 | 直到 3 年前

FaSh 3 年前

你可以简单地改变 [...slug].js 到 [[...slug]].js 以获取从开始的所有路线 countries 。它在NextJs中被视为可选的URL参数。
Official NextJs documentation 还说:

Catch-all路由可以通过将参数包含在双括号中而变为可选

推荐文章

daniel sas · NextJS和React无法读取未定义的属性,element.map不是函数

2 年前

Berendschot · 将条件类与静态类NextJS相结合

2 年前

Demonix · React Firebase onSnapshot为映射函数返回null

2 年前

wannnwdooo · Nextjs中的图像

2 年前

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Rohit Jambhulkar · 在javascript中使用情绪/样式时出现服务器错误

2 年前

Kiki · TypeError:无法读取null的属性(读取“\u传单\u禁用\u单击”)

2 年前

bami · 动态SSG页需要getStaticPaths,而地址缺少getStaticPaths

2 年前

YaddyVirus · NextJS API中where子句中的未知列

2 年前

m m · 获取未定义或承诺{<pending>}尝试推送到数组[重复]

2 年前