React Router嵌套路由样式添加方法？路由内Div样式不生效解决方案

你的代码里存在核心问题：React Router v6 要求 <Routes> 的直接子元素只能是 <Route> 标签，你放在 <Routes> 里的 <div> 根本不会被渲染，所以设置的样式自然不生效。下面是几种可行的解决方法：

方案1：把样式整合到 PrivateRouter 组件中 #

这是最推荐的方式，把样式封装到路由守卫组件内部，逻辑更清晰：

// PrivateRouter.js
import { Outlet } from 'react-router-dom';

const PrivateRouter = () => {
  // 保留你的权限校验逻辑
  return (
    <div style={{ marginBottom: "60px" }}>
      <Outlet />
    </div>
  );
};

export default PrivateRouter;

然后修改 App.js 里的路由结构，去掉多余的 div：

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

方案2：直接在 Route 的 element 中包裹样式容器 #

如果不想改动 PrivateRouter 组件，可以直接给路由的 element 套上带样式的 div：

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

方案3：给页面组件添加样式 #

如果样式只需要作用于 PageRender 这类页面组件，可以直接在组件内部的根元素上设置样式，或者用 CSS 模块、styled-components 等方案管理样式：

// PageRender.js
const PageRender = () => {
  return (
    <div style={{ marginBottom: "60px" }}>
      {/* 页面内容 */}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者suraj prajapati