Styled Components刷新页面样式失效，导航跳转正常问题咨询

First off, your component and styled component code looks perfectly correct—this issue is not a routing problem (React Router is working as expected). The problem lies in how styled-components handles style injection during the initial page load (when you refresh), rather than client-side navigation. Here's why this happens and how to fix it:

1. You're Using Server-Side Rendering (SSR) #

If your app uses SSR (e.g., Next.js, custom Express SSR), styled-components needs explicit setup to collect and inject styles on the server. When you refresh, the server renders the component but doesn’t include the styled-components styles in the initial HTML. Client-side navigation works because styles are injected dynamically once the app is already loaded.

Fix: #

Use the ServerStyleSheet from styled-components on your server to collect styles and inject them into the HTML template:

import { ServerStyleSheet } from 'styled-components';
import ReactDOMServer from 'react-dom/server';
import App from './App';

// In your server render route:
const sheet = new ServerStyleSheet();
const appHtml = ReactDOMServer.renderToString(sheet.collectStyles(<App />));
const styleTags = sheet.getStyleTags(); // Generates <style> tags for your styles

// Inject styles into your HTML head
const finalHtml = `
  <!DOCTYPE html>
  <html>
    <head>
      ${styleTags}
    </head>
    <body>
      <div id="root">${appHtml}</div>
      <script src="/client-bundle.js"></script>
    </body>
  </html>
`;

res.send(finalHtml);

On the client, standard React hydration will pick up these styles automatically.

2. Client-Only App (No SSR) #

If you’re running a client-side only app (e.g., Create React App), the most common culprits are missing the styled-components Babel plugin or caching issues.

Fixes: #

• Install the babel-plugin-styled-components:
  This plugin ensures consistent class names, improves debugging, and prevents style injection glitches in production. Install it first:

  npm install --save-dev babel-plugin-styled-components
  # or
  yarn add --dev babel-plugin-styled-components
  

  Then add it to your Babel config (e.g., .babelrc or babel.config.js):

  {
    "plugins": ["babel-plugin-styled-components"]
  }
  

  For Create React App users, use craco or react-app-rewired to add this plugin without ejecting.
• Clear browser cache:
  Old cached JS/CSS files can block styles from loading on refresh. Try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) or clear your browser’s cache entirely.
• Check for console errors:
  Open your browser’s dev tools and look for JavaScript errors. Even a small runtime error during initial load can stop styled-components from injecting styles properly.

Quick Confirmation Test #

To rule out routing entirely: Access /order directly in an incognito/private window. If styles still don’t load, it’s definitely a styled-components setup issue. If they do load, it’s a caching problem.

Content of the question originates from Stack Exchange, asked by Pierre Olivier Tran.