如何在嵌套路由react路由器中添加样式

Question

我无法在app.js文件中添加样式。div在路由内不工作。有没有其他方法可以在路线内添加样式？

<Routes>
<Route exact path="/" element={auth.token ? <Home > : < Login />} />
<Route exact path="/register" element={<Register />} />
<div style={{ marginBottom: "60px" }}>
<Route element={<PrivateRouter />}>
<Route exact path="/:page" element={<PageRender />} />
<Route exact path="/:page/:id" element={<PageRender/>} />
</Route>
</div>
</Routes>

Answer 1

创建一个布局路由，将div元素和样式和呈现为嵌套Route组件的Outlet组件，以将其element道具呈现到其中。

示例：

import { Outlet } from 'react-router-dom';
const Layout = () => (
<div style={{ marginBottom: "60px" }}>
<Outlet />
</div>
);
export default Layout;

import Layout from '../path/to/Layout';
...
<Routes>
<Route path="/" element={auth.token ? <Home /> : < Login />} />
<Route path="/register" element={<Register />} />
<Route element={<Layout />}>
<Route element={<PrivateRouter />}>
<Route path="/:page" element={<PageRender />} />
<Route path="/:page/:id" element={<PageRender />} />
</Route>
</Route>
</Routes>