React-router not loading css for nested pages on refresh

Question

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?

Are you getting 404s on those .css files when you reload? Is your web server pointing all / and /components/:name to your index.js where you load react and all related files? — JorgeObregon
– JorgeObregon, Commented Nov 4, 2016 at 15:18
@JorgeObregon am getting 404, it tries to load the css and scripts as http://localhost:3000/components/assets/js/jquery.slimscroll.js instead of http://localhost:3000/assets/js/jquery.slimscroll.js — Philip K. Adetiloye
– Philip K. Adetiloye, Commented Nov 4, 2016 at 15:55
@JorgeObregon how do I point my webserver to /components/:name? — Philip K. Adetiloye
– Philip K. Adetiloye, Commented Nov 4, 2016 at 15:56
it depends on the webserver you are using. Apache uses .htaccess file for pretty links, while ExpressJS uses a RegExp to match your routes — JorgeObregon
– JorgeObregon, Commented Nov 4, 2016 at 16:07

sonarforte · Accepted Answer · 2017-06-25 03:04:02Z

93

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.

answered Jun 25, 2017 at 3:04

sonarforte

1,62416 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kurt William Over a year ago

Thanks sonarforte, for those using Webpack with the html webpack plugin to generate your index.html files I was able to solve this issue by telling Webpack where to place the output file in my config file. The object looked like this: output: { publicPath: "/" }

Amitk Over a year ago

worked for me! it was all about removing the dot before the path....

cavaleria · Accepted Answer · 2017-03-04 19:12:36Z

40

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.

answered Mar 4, 2017 at 19:12

cavaleria

1,4552 gold badges17 silver badges28 bronze badges

2 Comments

Matt West Over a year ago

Worked for me as of 10/2020

Blessing Charumbira Over a year ago

Perfect solution for nextjs or any folder structure architecture

mini yang · Accepted Answer · 2019-08-10 23:09:59Z

16

I added

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

to my index.html head

And it is resolved.

answered Aug 10, 2019 at 23:09

mini yang

3834 silver badges5 bronze badges

Comments

kepy97 · Accepted Answer · 2020-04-28 04:46:29Z

7

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.

answered Apr 28, 2020 at 4:46

kepy97

1,10411 silver badges12 bronze badges

Comments

ninjaas · Accepted Answer · 2018-02-22 18:49:45Z

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

Siddhartha Chowdhury · Accepted Answer · 2019-03-13 22:30:30Z

I know its a bit old thread, but ill share my solution here. Its a solution for setup that uses webpack instead create-react-app.

I found every other solution suggests to change the <link path in the html file. But like in my case webpack handles the asset linking.

I faced the same problem today. Routes like /some_route works but - /some_route/second_level it doesn't, leaving behind a message in console stating -

Refused to apply style from 'http://localhost:8080/some_route/some_style.css'.

I fixed this problem by updating my webpack.config.js file

output: {
    filename: 'build.js',
    path: path.join(__dirname, '/dist'),
    publicPath: '/',         ////// <-- By adding this line
}

Hope it helps someone. Thanks!

Sry, but this is the output configuration part of webpack.config.js. The rest of the webpack.config.js is not the subject

JorgeObregon · Accepted Answer · 2016-11-04 16:04:35Z

Your script is not loading your css due to the 404 errors. Your webserver is not redirecting all /components/* request to index file and then routing to your view via react.

But now, specifically about fixing your css issues... In the past, I've struggled with the css imports in jsx files, so you are not alone :) Instead, I've chosen to use SASS or LESS to compile my css to a bundle.css file with grunt or gulp. Then load that bundle.css directly on my index.html file. One neat trick about using css compilers is every time you change a .scss or .less file, your bundle.css will get updated.

Hope I pointed you in the right direction.

Cheers,

thanks Jorge but loading bundle.css won't solve the problem of webserver not redirecting /components/* to index file ?

Farshin Asri · Accepted Answer · 2021-03-14 17:24:19Z

0

I know this is weird , but if you use [email protected] ,delete it and install [email protected] react-router have many incompatibilities with history version 5 . for me it's worked.

answered Mar 14, 2021 at 17:24

Farshin Asri

1

Comments

Cels · Accepted Answer · 2024-04-16 17:27:11Z

0

If you built your app using webpack,

Change

...
output: {
     publicPath: "./",
     ...
},
...

to

...
output: {
     publicPath: "/",
     ...
},
...

Cheers

answered Apr 16, 2024 at 17:27

Cels

1,35422 silver badges27 bronze badges

Collectives™ on Stack Overflow

React-router not loading css for nested pages on refresh

9 Answers 9

2 Comments

2 Comments

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

2 Comments

Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Linked

Related