React-router not loading css for nested pages on refresh

css reactjs react-router

20,255

Solution 1

I had this problem too, where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.

By replacing the links with absolute paths as per this documentation, my problem was resolved.

For me, this meant changing

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

to this:

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

I'm not sure if the same thing would work for your import statements, but it is worth a shot.

FYI I'm using the project layout from create-react-app.

Solution 2

Found it!

Add the HTML Element:

<base href="/" /> <!-- for local host -->

to your index page to set a base case for your URL so all else will follow suite.

Solution 3

I added

<base href="/" /> <!-- for local host -->

to my index.html head

And it is resolved.

Solution 4

The simplest solution is here (Need to change index.html only)

Just use %PUBLIC_URL% before every CSS or JS file.

You can check an example of %PUBLIC_URL% in index.html file if you created react app through create-react-app.

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

One thing is must: your CSS files and js files should be under a public directory.

Solution 5

If you are using create-react-app workflow, put the assets under public folder and use the special variable PUBLIC_URL.

Inside index.html use %PUBLIC_URL%:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Inside JS/JSX files use process.env.PUBLIC_URL:

render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using import for getting asset URLs // as described in “Adding Images and Fonts” above this section. return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; }

Recommended Approach:
import stylesheets, images, and fonts from JavaScript by placing it along with src files.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
   // Import result is the URL of your image
   return <img src={logo} alt="Logo" />;
}

export default Header;

Adding assets to public folder

When to use public folder

View more solutions

20,255

Author by

Adetiloye Philip Kehinde

Updated on July 09, 2022

Comments

Adetiloye Philip Kehinde almost 2 years

I'm trying to setup a react-router for my first React webapp, it seems to be working except that the css doesn't load for my nested pages when I refresh the pages.

However it works for just one level e.g /dashboard but the css won't load for /components/timer

Here is what my index.jsx file looks like

import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';

render(
  <Router history={browserHistory}>
    <Route path="/" component={Dashboard}/>
    <Route path="/components/:name" component={WidgetComponent}/>
    <Route path="*" component={Dashboard}/>
  </Router>,
  document.getElementById('root')
);

Any idea why?