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
不存在,则改为渲染 404
。
此外,由于 children
是一个隐式插槽,因此您还需要创建一个 default.js
文件,以便在 Next.js 无法恢复父页面的活动状态时渲染回退内容。
参考
params
(可选)
一个解析为对象的 Promise,该对象包含从根段到插槽子页面的 动态路由参数。例如
app/[artist]/@sidebar/default.js
export default async function Default({
params,
}: {
params: Promise<{ artist: string }>
}) {
const artist = (await params).artist
}
示例 | URL | params |
---|---|---|
app/[artist]/@sidebar/default.js | /zack | Promise<{ artist: 'zack' }> |
app/[artist]/[album]/@sidebar/default.js | /zack/next | Promise<{ artist: 'zack', album: 'next' }> |
- 由于
params
属性是一个 Promise。您必须使用async/await
或 React 的use
函数来访问这些值。- 在版本 14 及更早版本中,
params
是一个同步属性。为了帮助向后兼容,您仍然可以在 Next.js 15 中同步访问它,但此行为将在将来弃用。
- 在版本 14 及更早版本中,
这有帮助吗?