Remove layout on nested route?
Answered
Sun bear posted this in #help-forum
Sun bearOP
Is there a way to remove the inherited layout in a child route. I want to render page preview in my website builder inside a child route and show it using an
The
Ideally I would like to solve this without adding pathname check inside each parent layout if possible.
<iframe src={`/dashboard/${appName}/page/${pageId}/preview`} />The
preview page should ideally have no layouts inherited from parents. ChatGPT suggested an ellegant approach like below, but it sadly does not work.const PreviewPage = () => {
return <div>Preview page</div>
}
PreviewPage.getLayout = () => null
export default PreviewPageIdeally I would like to solve this without adding pathname check inside each parent layout if possible.
5 Replies
@Sun bear Is there a way to remove the inherited layout in a child route. I want to render page preview in my website builder inside a child route and show it using an <iframe src={`/dashboard/${appName}/page/${pageId}/preview`} />. This displays the page correctly, but it also shows the duplicate layouts which the website preview should not have since it is used only in the dashboard of the application.
The `preview` page should ideally have no layouts inherited from parents. ChatGPT suggested an ellegant approach like below, but it sadly does not work.
tsx
const PreviewPage = () => {
return <div>Preview page</div>
}
PreviewPage.getLayout = () => null
export default PreviewPage
Ideally I would like to solve this without adding pathname check inside each parent layout if possible.
When using iframes the page doesnt know, that it was rendered as iframe. But the page need to know that it serves as preview. Nearly the only thing that you can do with iframes is the url. So there need to be something inside the url.
Now your choice:
1. Dynamic Param. For example like
2. (Recommended) using a searchParams like
Of couse you can also not use an iframe and directly import the component and tell it via props how to behave. Like that you can also use only the correct component without even loading the layout <---- I would do this
Now your choice:
1. Dynamic Param. For example like
.../page/${pageId}/preview/final (then if this optional dynamic param is set, you know that you are in the preview mode and can hide the layout inside your layout2. (Recommended) using a searchParams like
.../page/${pageId}/preview?final=trueOf couse you can also not use an iframe and directly import the component and tell it via props how to behave. Like that you can also use only the correct component without even loading the layout <---- I would do this
or, create a new route group
Answer
@Sun bear solved?
Sun bearOP
Yea I created a deattached route
not preffered but works...