在 nextjs 中将 /username 指向 /[user]/[tab].js 而不是 [user]/index.js

Question

我正在尝试创建一个用户个人资料页面，该页面会根据用户所在的当前 选项卡 生成内容。

选项卡根据 URL 中传递的内容决定（例如 /username/tab1）。唯一的问题是用户可以访问的有效选项卡之一实际上具有空白值（/username，以获取默认选项卡）。

然而，当你在浏览器中输入这个时，Next 自动假设我想要检索 /[user]/index.js（它不存在），而实际上我想要的是想要得到的是 /[user]/[tab].js 并传递一个空值给 tab 属性 in context.query.

是否可以不创建单独的 index.js 和 [tab].js 文件？

// Exported inside /pages/[user]/[tab].js
export const getServerSideProps = async (context) => {
    const { page, tab } = context.query;

    // When we're on /username/foo it should output "foo".
    // When we're on /username it should output "".
    console.log(tab); 
};

Answer 1

您可以使用 optional catch-all route 实现此目的。

因此，将您的 [tab].js 重命名为 [[...tab]].js，这样它也可以在没有选项卡的情况下捕获对 /username 的请求。然后在您的代码中，您将选项卡作为可选处理。

在 nextjs 中将 /username 指向 /[user]/[tab].js 而不是 [user]/index.js

point /username to /[user]/[tab].js and not [user]/index.js in nextjs

javascript

next.js