React应用刷新/点击浏览器回退按钮时CSS丢失问题求助

看起来你遇到的问题主要来自重复的Router组件和路由结构不合理，同时也需要确认CSS路径的正确性。下面一步步帮你解决：

1. 移除Dashboard中嵌套的<Router> #

React Router只需要在应用的最顶层（也就是你的App.js）保留一个<Router>实例即可。嵌套的<Router>会破坏路由上下文，导致页面刷新或回退时，组件的渲染上下文混乱，进而引发样式加载异常。

修改你的Dashboard.js，移除多余的<Router>：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { fetchProjects } from "../../actions/ProjectActions";
import '../../../css/main.css';
import { Route, NavLink, Redirect, withRouter } from "react-router-dom";
import Projects from "../projects/Projects.js";
import Customers from "../customers/Customers.js";

class Dashboard extends Component {
  render() {
    return (
      <div>
        <h1>Reporting Tool</h1>
        <ul className="header">
          <li><NavLink to="/projects">Projects</NavLink></li>
          <li><NavLink to="/customers">Customers</NavLink></li>
        </ul>
        <div className="content">
          <Route path="/projects" component={Projects}/>
          <Route path="/customers" component={Customers}/> {/* 修正了路径大小写问题，和NavLink保持一致 */}
        </div>
      </div>
    );
  }
}

export default Dashboard;

2. 调整App.js的路由结构，使用嵌套路由 #

当前你的App.js里把Dashboard、Projects、Customers都作为同级路由，这不符合嵌套路由的逻辑。应该把Projects和Customers作为Dashboard的子路由，这样进入/dashboard后才能正确渲染侧边栏和子页面：

修改App.js的路由部分：

// ... 其他导入代码不变
class App extends Component {
  // ... 其他逻辑不变

  render() {
    return (
      <Provider store={store}>
        <Router>
          <Switch>
            <Route exact path="/" render={(props) => <Login isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} handleLogout={this.handleLogout} {...props} />} />
            <Route path="/login" render={(props) => <Login onLogin={this.handleLogin} {...props} />} />
            {/* 把Dashboard作为父路由，包含子路由 */}
            <PrivateRoute authenticated={this.state.isAuthenticated} path="/dashboard" render={(props) => (
              <Dashboard {...props}>
                <Switch>
                  <Route path="/dashboard/projects" component={Projects} />
                  <Route path="/dashboard/customers" component={Customers} />
                  {/* 默认跳转到projects页面 */}
                  <Redirect to="/dashboard/projects" />
                </Switch>
              </Dashboard>
            )} />
            {/* 处理直接访问子路由的情况，重定向到带dashboard的路径 */}
            <PrivateRoute authenticated={this.state.isAuthenticated} path="/projects" render={() => <Redirect to="/dashboard/projects" />} />
            <PrivateRoute authenticated={this.state.isAuthenticated} path="/customers" render={() => <Redirect to="/dashboard/customers" />} />
          </Switch>
        </Router>
      </Provider>
    )
  }
}

export default App

同时更新Dashboard.js里的NavLink路径，匹配新的嵌套路由：

<ul className="header">
  <li><NavLink to="/dashboard/projects">Projects</NavLink></li>
  <li><NavLink to="/dashboard/customers">Customers</NavLink></li>
</ul>
<div className="content">
  <Route path="/dashboard/projects" component={Projects}/>
  <Route path="/dashboard/customers" component={Customers}/>
</div>

3. 确认CSS文件的引入路径正确 #

检查Dashboard.js里的CSS导入路径import '../../../css/main.css';，确保这个路径相对于Dashboard.js的位置是正确的。你可以打开浏览器控制台的「网络」标签，刷新页面，查看main.css的请求状态，如果是404，就调整路径到正确位置。

4. 生产环境额外配置：支持HTML5 History模式 #

如果上述问题都解决了，但生产环境刷新页面仍出现样式丢失或404，那是因为BrowserRouter使用HTML5 History模式，服务器需要配置所有路由请求都返回index.html：

• 用Nginx的话，在配置里添加：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• 用Create React App的serve包部署，直接运行serve -s build即可自动支持。

完成以上步骤后，刷新或回退页面时CSS应该就能正常加载了。

内容的提问来源于stack exchange，提问作者Eamon Mac