Eamon Mac :
Have an app that goes from login screen to a dashboard with two further pages, customers and projects. When i load these screens it works fine but when i go back in the browser or click refresh on the browser the css gets lost. Here is my code: Any help at all is greatly appreciated.
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) Dashboard.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;
}
Jonathan Irwin :
Since your main.css is a global stylesheet you can instead add it to your index.html instead of trying to import it to JS
If you used Create React App or something similar your index.html file will likely live in the /public folder.
You can copy your main.css file to that public folder and then add it to the <head> tag like this:
<head>
<link rel="stylesheet" href="main.css">
</head>