mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Ivo BiausandGitHub
d1d29cc263
Corrected the indicated URL, since based on the image it's referring to, there is no "dashboard" parent folder around settings. Image of reference: 
40 lines
2.2 KiB
Plaintext
40 lines
2.2 KiB
Plaintext
---
|
|
title: default.js
|
|
description: API Reference for the default.js file.
|
|
related:
|
|
title: Learn more about Parallel Routes
|
|
links:
|
|
- app/building-your-application/routing/parallel-routes
|
|
---
|
|
|
|
The `default.js` file is used to render a fallback within [Parallel Routes](/docs/app/building-your-application/routing/parallel-routes) when Next.js cannot recover a [slot's](/docs/app/building-your-application/routing/parallel-routes#slots) active state after a full-page load.
|
|
|
|
During [soft navigation](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation), Next.js keeps track of the active _state_ (subpage) for each slot. However, for hard navigations (full-page load), Next.js cannot recover the active state. In this case, a `default.js` file can be rendered for subpages that don't match the current URL.
|
|
|
|
Consider the following folder structure. The `@team` slot has a `settings` page, but `@analytics` does not.
|
|
|
|
<Image
|
|
alt="Parallel Routes unmatched routes"
|
|
srcLight="/docs/light/parallel-routes-unmatched-routes.png"
|
|
srcDark="/docs/dark/parallel-routes-unmatched-routes.png"
|
|
width="1600"
|
|
height="930"
|
|
/>
|
|
|
|
When navigating to `/settings`, the `@team` slot will render the `settings` page while maintaining the currently active page for the `@analytics` slot.
|
|
|
|
On refresh, Next.js will render a `default.js` for `@analytics`. If `default.js` doesn't exist, a `404` is rendered instead.
|
|
|
|
Additionally, since `children` is an implicit slot, you also need to create a `default.js` file to render a fallback for `children` when Next.js cannot recover the active state of the parent page.
|
|
|
|
## Props
|
|
|
|
### `params` (optional)
|
|
|
|
An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) from the root segment down to the slot's subpages. For example:
|
|
|
|
| Example | URL | `params` |
|
|
| ------------------------------------------ | ------------ | ----------------------------------- |
|
|
| `app/@sidebar/[artist]/default.js` | `/zack` | `{ artist: 'zack' }` |
|
|
| `app/@sidebar/[artist]/[album]/default.js` | `/zack/next` | `{ artist: 'zack', album: 'next' }` |
|