mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jiachi LiuandGitHub
594f3d1fc0
### What & Why
Previously when rendering the root `/_not-found` in production, we'll always override the parallel routes component children with not-found component, this will break the navigation in build mode from root 404 `/_not-found` path.
### How
The new solution is to change the root `/_not-found` rendering strategy. Previously the loader tree of `/_not-found` look like this
```js
['',
{
children: ['not-found', {}, {}]
},
{ layout: ..., 'not-found': ...}
]
```
it's not a pretty valid tree, which could lead to problems during rendering.
New solution is to change the children to render a page, but the page content is `not-found.js` component. The new tree of root not-found will look like
```js
['',
{
children: ['__PAGE__', {}, {
page: ... // same as root 'not-found'
}]
},
{ layout: ..., 'not-found': ...}
]
```
This change could fix the navigation on the root not-found page.
Fixes #52264
39 lines
934 B
TypeScript
39 lines
934 B
TypeScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
|
|
export default function Root({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html>
|
|
<body>
|
|
<nav>
|
|
<div>
|
|
<ul>
|
|
<li>
|
|
<Link id="go-to-index" href="/">
|
|
Index
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link id="go-to-dynamic" href="/dynamic/foo">
|
|
Dynamic page
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link id="go-to-404" href="/does-not-exist">
|
|
Not found page
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link id="go-to-dynamic-404" href="/dynamic/404">
|
|
Dynamic not found page
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
{children}
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|