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

Question

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

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

但是，当您将其输入浏览器时，Next自动假设我想要检索/[user]/index.js（这并不存在），而实际上我想要获取的是/[user]/[tab].js并将空白值传递tab给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

您可以使用可选的 catch-all 路由来实现此目的。

因此，将您的[tab].js名称重命名为[[...tab]].js，这样它也会捕获对 /username 的请求，而无需选项卡。然后在您的代码中，您将处理选项卡作为可选。