javascript - 在 React 应用程序中按下刷新或后退按钮时 CSS 丢失

Question

有一个从登录屏幕到仪表板的应用程序，其中包含另外两个页面:客户和元素。当我加载这些屏幕时，它工作正常，但是当我返回浏览器或单击浏览器上的刷新时，css 丢失了。这是我的代码:非常感谢任何帮助。

    1)    App.js

    import React, {Component} from 'react';
    import Login from './js/components/login/Login.js';
    import Dashboard from './js/components/dashboard/Dashboard.js';
    import {BrowserRouter as Router, Route, Switch, withRouter} from 'react-router-dom';
    import store from './js/config/store'
    import { Provider } from 'react-redux'
    import PrivateRoute from './common/PrivateRoute';
    import { getCurrentUser } from './util/APIUtils';

    import { Layout, notification } from 'antd';
    import { ACCESS_TOKEN } from './index';

    //Private Route
    import Projects from "./js/components/projects/Projects.js";
    //Public Route
    import Customers from "./js/components/customers/Customers.js";

    const { Content } = Layout;

    class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
          currentUser: null,
          isAuthenticated: true,
          isLoading: false
        }
       // this.handleLogout = this.handleLogout.bind(this);
        this.loadCurrentUser = this.loadCurrentUser.bind(this);
        //this.handleLogin = this.handleLogin.bind(this);

        notification.config({
          placement: 'topRight',
          top: 70,
          duration: 3,
        });
      }

      loadCurrentUser() {
        this.setState({
          isLoading: true
        });
        getCurrentUser()
        .then(response => {
          this.setState({
            currentUser: response,
            isAuthenticated: true,
            isLoading: false
          });
        }).catch(error => {
          this.setState({
            isLoading: false
          });
        });
      }

      componentDidMount() {
          this.loadCurrentUser();
        }





        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>

                            <Route path="/login"
                             render={(props) => <Login onLogin={this.handleLogin} {...props} />}></Route>

                             <PrivateRoute authenticated={this.state.isAuthenticated} path="/projects" component={Projects}></PrivateRoute>
                             <PrivateRoute authenticated={this.state.isAuthenticated} path="/customers" component={Customers}></PrivateRoute>
                             <PrivateRoute authenticated={this.state.isAuthenticated} path="/dashboard" component={Dashboard}></PrivateRoute>

                        </Switch>
                    </Router>
                </Provider>
            )
        }
    }

    export default  App

2) 仪表板.js

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,
    BrowserRouter as Router,
    Redirect,
    withRouter

} from "react-router-dom";


//Private Route
import Projects from "../projects/Projects.js";
//Public Route
import Customers from "../customers/Customers.js";




class Dashboard extends Component {

   render() {
          return (
              <Router>
                  <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}/>


                      </div>

                  </div>
              </Router>
          );
      }
     }

export default Dashboard;

3)CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4 ,h5, h6, p, ui, li{
    font-weight: 400;
}

/*Dashboard*/


ul.header li {
    display: inline;
    list-style-type: none;
    margin: 0;
}
ul.header {
    background-color: #111;
    padding: 0;
}
ul.header li a {
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
}
.content {
    background-color: #FFF;
    padding: 20px;
}
.content h2 {
    padding: 0;
    margin: 0;
}
.content li {
    margin-bottom: 10px;
}

a {
    text-decoration: none;
    outline: none;
}

ul {
    list-style: none;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #323531;
    -webkit-font-smoothing: antialiased;
}


/* Login */

.wrapper {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.wrapper .right {
    flex: 3;
}

.wrapper .left {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 100vh;
    box-shadow: 2px 0 5px 0 rgba(43,40,43,0.3);
    z-index: 1;
}

.left .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    padding-bottom: 1rem;
}

.left .login .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding-left: 1rem;
}

.left .login .logo img {
    width: 100px;
}

.left .login .logo h1 {
    font-size: 1.5rem;
}

.left .login label {
    font-size: 0.9rem;
    line-height: 2rem;
    font-weight: 400;
}

.left .login form {
    width: 80%;
    padding-bottom: 2rem;
}

.login .text-input {
    margin-bottom: 1.5rem;
    width: 100%;
    border-radius: 3px;
    background: transparent;
    border: 1px solid #4D52694D;
    padding: 0.5rem 1rem;
    line-height: 1.3rem;
}

.login .error-message {
    display: none;
    font-weight: 400;
    color: #ED5565;
}

.login .error-message.show {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
}

.login .form-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.login .form-actions a {
    color: #4D5269;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
}

.login .or, .links {
    width: 80%;
}

.secondary-btn {
    width: 60%;
}

.login .links a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.login .or {
    display: flex;
    flex-direction: row;
    margin-bottom: 1.5rem;
    align-items: center;
}

.login .or .bar {
    flex: auto;
    border: none;
    height: 1px;
    background: #4D52694D;
}

.login .or span {
    color: #4D5269;
    padding: 0 0.9rem;
}



.right .banner-showcase {
    display: flex;
    justify-content: center;
    background: url('../image/banner-big.jpg') no-repeat center center / cover;
    height: 100vh;
    text-align: center;
}

.right .banner-showcase h1 {
    font-size: 3rem;
    width: 100%;
    color: #fff;
    padding-top: 2vh;
}

.login-footer {
    text-align: center;
    font-size: 0.8rem;
    width: 80%;
    padding-top: 3rem;
}

/* Buttons */

.primary-btn {
    padding: 0.7rem 1rem;
    height: 2.5rem;
    display: block;
    border: 1px solid #977ED9;
    border-radius: 3px;
    font-weight: 300;
    background: transparent;
    color: #977ED9;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.5s;
}


.secondary-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    height: 2.5rem;
    display: block;
    border: 1px solid #977ED9;
    border-radius: 3px;
    font-weight: 300;
    background: transparent;
    color: #977ED9;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.5s;
}

/* React progress button */

.pb-container {
    width: 100%;
}
.pb-container .pb-button {
    background: transparent;
    border: 1px solid #977ED9;
    border-radius: 3px;
    padding: 0.7em 1em;
    height: 2.5rem;
    width: 100%;
 }

.pb-container .pb-button span {
    font-size: 0.9rem;
    color: #977ED9;
    font-weight: 300;
}
.pb-container .pb-button svg {
    height: 2.5rem;
    width: 2.5rem;
}

.pb-container.loading .pb-button {
    width: 2.5rem;
    border-radius: 27px;
    color: #977ED9;
}

.pb-container.error .pb-button {
    border-color: #ED5565;
    background-color: #ED5565;
}

.pb-container.success .pb-button {
    border-color: #A0D468;
    background-color: #A0D468;
}

Answer 1

由于您的 main.css 是一个全局样式表，您可以将其添加到您的 index.html 而不是尝试将其导入 JS

如果您使用了 Create React App 或类似的东西，您的 index.html 文件可能会位于 /public 中文件夹。

您可以将 main.css 文件复制到该公共(public)文件夹，然后将其添加到 <head>像这样的标签:

<head>
  <link rel="stylesheet" href="main.css">
</head>