主体位于root.jsx中,我想给予它一个参数作为class,该参数将根据页面的不同而变化。在每个页面上的路由中,我想赋值,例如,on _index的class等于“公司主页”,在餐馆路由中,class等于“场地公司”等等。是否可以将参数从路由传输到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
1条答案
按热度按时间bqucvtff1#
简单的方法是引入一个对象,其中有CSS文件和URL路径的Map,然后您可以使用
useLocation
钩子来检查哪个子组件正在呈现。字符串
您可以交换CSS文件链接。但我建议不要更改父组件本身的CSS。只需将不同的CSS文件添加到相应的组件中。如果每次渲染子组件时都更新父组件上的CSS文件,那么它将影响应用程序的性能,并违背React提供的性能调优。如果是同一个网站,只是不同的子页面,那么你总是希望保持父主题,如页眉和页脚在整个应用程序中的一致性,这是很好的设计原则。