主体位于 root.jsx 中，我想在其中为其提供一个参数作为类，该参数将根据页面而变化。在每个页面的路线中，我想分配值，例如_index上的类等于“公司主页”，在餐馆路线中，类等于“场地公司”等等。是否可以将参数从路由传递到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>
);
}
尝试了root.jsx中的函数加载器来获取每个页面的API，并向主体className添加一个变量，但有时没有关于pageClassName的数据，所以我需要从路由手动将有关className的参数传递到每个页面并将此参数传递给root.jsx
简单的方法是引入一个对象，其中有 CSS 文件和 url 路径的映射，然后您可以使用
useLocationimport { useLocation } from "@remix-run/react";
function SomeComponent() {
const location = useLocation();
// ...
}
您可以交换 CSS 文件链接。但我建议不要从父级本身更改 CSS。只需将不同的 CSS 文件添加到相应的组件即可。如果每次渲染子组件时都更新父组件上的 CSS 文件，那么它将影响应用程序的性能，并且违背了 React 提供的性能调整。如果它是同一个网站，只是不同的子页面，那么您总是希望在整个应用程序中保持父主题（例如页眉和页脚）一致，这符合设计原则。