I am trying to set parameters for the body class in root.jsx, which will change based on the page being viewed. I want to assign different values to the class in each route - for example, in _index it should be "company homepage", and in the restaurants route it should be "venue company", and so on. Is there a way to pass parameters from routes to root.jsx?
root.jsx
export default function App() {
return (
<html lang='en'>
<head>
<meta charSet='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link
rel='preconnect'
href='https://fonts.gstatic.com'
crossOrigin='anonymous'
/>
<link
href='https://fonts.googleapis.com/css?family=Montserrat:wght@100,300,400,500,700&display=swap'
rel='stylesheet'
/>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
_index.jsx
export default function Index() {
const { startPage } = useLoaderData()
const page = startPage.page.sections;
return (
<main id='main'>
<PageComponents page={page} />
</main>
);
}
restaurants.jsx
export default function Restaurants() {
const { restaurants } = useLoaderData();
return (
<>
<PageComponents page={restaurants.sections} />
<footer className='footer' />
</>
);
}
PageComponents.jsx
import loadable from "@loadable/component";
const components = {
logo: loadable(() => import("./Logo")),
intro: loadable(() => import("./Intro")),
languageSwitch: loadable(() => import("./LanguageSwitch")),
venueGroup: loadable(() => import("./VenueGroup")),
};
export default function PageComponents({ page }) {
return (
<main>
{page
.filter(({ type }) => !!components[type])
.map(({ data, type }) => {
const Component = components[type];
return (
<div key={type}>
<Component data={data} />
</div>
);
})}
</main>
);
}
Tried implementing a loader function in root.jsx to fetch API data for each page and include a variable for the body's className, but sometimes there may not be any data available about the pageClassName. In such cases, I need to manually pass the className parameter to each page from the routes and then transfer this parameter to root.jsx.