default.js

default.js 文件用于在 并行路由中渲染一个后备内容，当 Next.js 在完整页面加载后无法恢复插槽的活动状态时使用。

在软导航期间,Next.js 会跟踪每个插槽的活动状态(子页面)。然而,对于硬导航(完整页面加载),Next.js 无法恢复活动状态。在这种情况下,可以为与当前 URL 不匹配的子页面渲染 default.js 文件。

考虑以下文件夹结构。@team 插槽有一个 settings 页面,但 @analytics 没有。

当导航到 /settings 时,@team 插槽将渲染 settings 页面,同时为 @analytics 插槽保持当前活动的页面。

刷新时,Next.js 将为 @analytics 渲染 default.js。如果 default.js 不存在,会为命名插槽(@team、@analytics 等)返回错误,并要求你定义 default.js 才能继续。如果你想保留在这些情况下返回 404 的旧行为,可以创建一个包含以下内容的 default.js:

import { notFound } from 'next/navigation'
 
export default function Default() {
  notFound()
}

此外,由于 children 是一个隐式插槽,当 Next.js 无法恢复父页面的活动状态时,你还需要创建一个 default.js 文件来为 children 渲染后备内容。如果你不为 children 插槽创建 default.js,它将为该路由返回 404 页面。

参考

params(可选)

一个 promise,解析为包含从根段到插槽子页面的动态路由参数的对象。例如:

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params
}

• 由于 params 属性是一个 promise,你必须使用 async/await 或 React 的 use 函数来访问值。
  • 在版本 14 及更早版本中,params 是一个同步属性。为了帮助向后兼容,你仍然可以在 Next.js 15 中同步访问它,但这种行为将在未来被弃用。