Rendering different <html> tag in different layouts
Hello, I'm trying to structure my routes in such away, where
However, I'm getting an error
If I'm reading the comment next to component correctly I probably shouldn't render
Minimal reproduction (with start for easier setup, but I don't think it changes anything there):
https://github.com/pawelblaszczyk5/different-root-per-layout-reproduction
__root.tsx<Outlet/> and I'm having two different layouts _home.tx and app.tsx which should manage their own <html> element. They need to e.g. set lang attribute and apply proper theming with completely different logic of retrieving the data (one based on URL/fixed values, other from logged in user's data). However, I'm getting an error
Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag. which orginates from OnRendered inside of Router - https://github.com/TanStack/router/blob/98dc05073dcf7490d38f9158833f3df22c005e96/packages/react-router/src/Match.tsx#L155If I'm reading the comment next to component correctly I probably shouldn't render
html tag outside of __root? Is there any way to structure it differently to achieve the same results?Minimal reproduction (with start for easier setup, but I don't think it changes anything there):
https://github.com/pawelblaszczyk5/different-root-per-layout-reproduction
GitHub
Contribute to pawelblaszczyk5/different-root-per-layout-reproduction development by creating an account on GitHub.
GitHub
A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more). - TanStack/router
A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more). - TanStack/router
