React JSX学习：按钮重载页面后CSS样式失效求助

根本原因 #

• 路径引用错误：你的跳转按钮指向public/index.html，跳转后页面的基准路径变为public/，而原HTML中CSS的引用路径是styles.css，浏览器会尝试在public/styles.css加载样式，但你的CSS文件实际不在该位置，导致样式加载失败。
• 不符合SPA跳转逻辑：在React项目中使用原生<a>标签跳转会触发整页刷新，既违背单页应用(SPA)的设计思路，也容易引发资源路径相关问题。

解决方法 #

方案一：修复CSS路径（临时快速解决） #

将HTML中的CSS引用改为基于根目录的绝对路径：

<link rel="stylesheet" href="/styles.css" />

注意：如果使用本地开发服务器（如create-react-app的devServer），确保styles.css放在项目的public目录下，根目录会指向该文件夹。

方案二：使用React Router实现单页路由（推荐） #

React项目内部跳转应使用React Router实现无刷新跳转，避免整页刷新带来的资源问题：

1. 安装React Router依赖：

npm install react-router-dom

2. 修改JS代码，用路由组件替代原生<a>标签：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";

const randomIMG = "https://picsum.photos/200";

// 首页组件
const Home = () => (
  <div>
    <h1 className="heading">My Favourite Foods</h1>
    <div>
      <img
        className="transform-images"
        src={randomIMG}
        alt="messi_worldcup_image1"
      />
      <img
        className="transform-images"
        src={randomIMG}
        alt="messi_worldcup_image2"
      />
      <img
        className="transform-images"
        src={randomIMG}
        alt="messi_worldcup_image3"
      />
    </div>
    <center>
      <Link to="/another-page">
        <button type="button">load</button>
      </Link>
    </center>
  </div>
);

// 跳转目标页面组件
const AnotherPage = () => (
  <div>
    <h1>跳转后的页面</h1>
    <Link to="/">返回首页</Link>
  </div>
);

ReactDOM.render(
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/another-page" element={<AnotherPage />} />
    </Routes>
  </Router>,
  document.getElementById("root")
);

这种方式是单页应用内部的路由跳转，不会刷新页面，CSS样式会持续生效。

额外提示 #

• 推荐将CSS文件放在React项目的public目录下，或使用CSS Modules等模块化方案管理样式，避免路径混乱。
• 内部页面跳转禁止使用原生<a>标签，否则会丢失React的状态管理优势，同时引发资源加载问题。

内容的提问来源于stack exchange，提问作者Ahmed Rameez