fix: apply components to mdx #638
Conversation
🦋 Changeset detectedLatest commit: 85689cc The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
| function Content(props) { | ||
| function Page(props) { | ||
| return ( | ||
| <__nextra_SSGContext__.Provider value={props}> | ||
| <MDXContent /> | ||
| {__nextra_withLayout__( | ||
| MDXContent, | ||
| { | ||
| titleText: typeof titleText === 'string' ? titleText : undefined, | ||
| ...__nextra_pageOpts__ | ||
| }, | ||
| ${layoutConfig ? '__nextra_layoutConfig__' : 'null'}, | ||
| )} | ||
| </__nextra_SSGContext__.Provider> | ||
| ) | ||
| } | ||
|
|
||
| export default __nextra_withLayout__( | ||
| ${JSON.stringify(pageNextRoute)}, | ||
| Content, | ||
| { | ||
| titleText: typeof titleText === 'string' ? titleText : undefined, | ||
| ...__nextra_pageOpts__ | ||
| }, | ||
| ${layoutConfig ? '__nextra_layoutConfig__' : 'null'}, | ||
| )`.trimStart() |
There was a problem hiding this comment.
Let me explain a bit on my previous change. _app.js renders the exported component from each page like render(<Page/>). And because function Page(props) { is a different function on every different page, when a client navigation happens, React re-renders the render(<Page2/>). Because <Page/> and <Page2/> have different types (Page !== Page2), React unmounts the <Page/> component and mounts the <Page2/>.
Because the layout stuff (navbar, sidebar, etc.) are all inside <Page/>, the states there will be reset too. That's why we had the getLayout() stuff.
And to avoid that, I refactored the withLayout HoC to always return the same component Layout, but use route to get the correct content to render inside. This way the layout will preserve the state and always be stable.
There was a problem hiding this comment.
the states there will be reset too
There are two states, one is the React state (useState) and another one is the DOM state (scroll positions):
close #637