如何在 next.js 中使用动态路由路由到页面

Question

我正在尝试将这些 url 路由到 next.js 中的 [id].js 文件，因此下面的 url 2 和 3 一切正常，但它不起作用对于 url 1，所以我必须创建另一个我不想要的 index.js 文件。是否可以使用相同的 [id].js 文件？对于 url 1 也。

url 1 -> /settings
url 2 -> /settings/notifications
url 3 -> /settings/security

我的文件结构

settings > [id].js

正在获取 ID

const router = useRouter()
const { id } = router.query;

Answer 1

像下面这样的文件结构是一种方法：

settings 
    > [id]
    > index

但是如果您不想添加索引文件，您可以使用可选的 catch-all routes 功能。请注意，它带有您可能不想要的其他功能，这也可能会稍微改变您的代码。

这是您必须遵循的结构：

settings
    >[[...id]]

{ } // GET `/post` (empty object)
{ "slug": ["notifications"] } // `GET /settings/notifications ` (single-element array)
{ "slug": ["notifications", "security"] } // `GET /settings/notifications/security ` (multi-element array)

如何在 next.js 中使用动态路由路由到页面

How to route to page using Dynamic Routes in next.js

routes

next.js

next-router