React Router Dom V6路由跳转后Styled Components样式不加载问题

可能的原因与修复方案 #

1. 改用命令式重定向替代声明式Navigate #

声明式<Navigate>可能在路由切换时干扰styled-components的样式注入时机，换成useNavigate钩子实现命令式重定向：

import { useNavigate, Outlet } from 'react-router-dom';
import { useEffect } from 'react';

function Private({ signed }) {
  const navigate = useNavigate();

  useEffect(() => {
    if (!signed) {
      // 用replace模式避免历史记录栈冗余
      navigate(DEFAULT_PUBLIC_ROUTE, { replace: true });
    }
  }, [signed, navigate]);

  // 仅登录状态下渲染子路由内容
  return signed ? <Outlet /> : null;
}

function Public({ signed }) {
  const navigate = useNavigate();

  useEffect(() => {
    if (signed) {
      navigate(DEFAULT_PRIVATE_ROUTE, { replace: true });
    }
  }, [signed, navigate]);

  return !signed ? <Outlet /> : null;
}

2. 确保全局样式上下文包裹路由 #

若使用ThemeProvider，需保证它完整包裹BrowserRouter，让路由切换时样式上下文始终生效：

import { ThemeProvider } from 'styled-components';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <ThemeProvider theme={yourCustomTheme}>
      <BrowserRouter>
        <Routes>
          <Route element={<Private signed={isSignedIn} />}>
            {/* 私有路由配置 */}
            <Route path="/dashboard" element={<Dashboard />} />
          </Route>
          <Route element={<Public signed={isSignedIn} />}>
            {/* 公开路由配置 */}
            <Route path="/login" element={<Login />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

3. 更新styled-components版本 #

旧版styled-components可能与React Router v6存在兼容性问题，执行更新命令：

npm update styled-components
# 或使用yarn
yarn upgrade styled-components

4. 排查React StrictMode影响（开发环境） #

React StrictMode会触发组件两次渲染，部分旧版styled-components可能因此出现样式注入异常。可暂时移除StrictMode测试：

// 原代码
<React.StrictMode>
  <App />
</React.StrictMode>

// 修改后
<App />

若问题解决，建议升级styled-components到支持StrictMode的最新版本。

5. 检查组件样式定义的正确性 #

确认公开路由组件中styled-components的使用无语法错误：

• 正确导入styled：import styled from 'styled-components';
• 样式模板字符串语法完整，无遗漏分号、括号等

内容的提问来源于stack exchange，提问作者Daniel Lopes