javascript - 如何在嵌套路由中添加样式 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 元素和样式的布局路由和 Outlet component为嵌套的 Route 组件渲染它们的 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>