`Error occurring with React-router when refreshing nested pages causing CSS not to load`

Question

`Error occurring with React-router when refreshing nested pages causing CSS not to load`

Setting up a react-router for my first React webapp has been a bit tricky. It seems to be functioning properly except for the issue with CSS not loading on nested pages when they are refreshed.

The CSS works fine for single level paths like /dashboard, but it doesn't load for paths like /components/timer.

Here is an excerpt from my index.jsx file:

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 thoughts on why this might be happening?

css reactjs react-router

Answer 1

Answer №1

Having faced a similar issue, I encountered a problem where my application was not loading style sheets and other assets. The cause of this issue was my direct import of assets into the index.html entry point of my app.

Following the instructions provided in this documentation on using absolute paths instead of relative links solved my problem effectively.

For me, this required changing

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

to:

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

While I cannot guarantee that this solution will work for your import statements, it is worth trying out.

For reference, I am using the project layout from create-react-app.

Answer 2

Having faced a similar issue, I encountered a problem where my application was not loading style sheets and other assets. The cause of this issue was my direct import of assets into the index.html entry point of my app.

Following the instructions provided in this documentation on using absolute paths instead of relative links solved my problem effectively.

For me, this required changing

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

to:

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

While I cannot guarantee that this solution will work for your import statements, it is worth trying out.

For reference, I am using the project layout from create-react-app.

Answer 3

Answer №2

Discovered!

Insert the following HTML Element:

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

into your main webpage to establish a base URL so that everything else will align accordingly.

Answer 4

Discovered!

Insert the following HTML Element:

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

into your main webpage to establish a base URL so that everything else will align accordingly.

Answer 5

Answer №3

After updating my index.html file, I included the following line in the head section:

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

This addition resolved the issue I was experiencing.

Answer 6

After updating my index.html file, I included the following line in the head section:

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

This addition resolved the issue I was experiencing.

Answer 7

Answer №4

The most straightforward solution can be found right here (Just make changes to index.html)

All you need to do is add %PUBLIC_URL% before each CSS or JS file.

If you used create-react-app to create your react app, you can see an example of %PUBLIC_URL% in the index.html file.

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

Remember: Your CSS and JS files must be located within a public directory.

Answer 8

The most straightforward solution can be found right here (Just make changes to index.html)

All you need to do is add %PUBLIC_URL% before each CSS or JS file.

If you used create-react-app to create your react app, you can see an example of %PUBLIC_URL% in the index.html file.

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

Remember: Your CSS and JS files must be located within a public directory.

Answer 9

Answer №5

If you are utilizing the create-react-app workflow, place your assets in the public folder and utilize the special variable PUBLIC_URL.

When working inside index.html, utilize %PUBLIC_URL%:

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

Within your JS/JSX files, use process.env.PUBLIC_URL:

render() {
  // Take note: only use this sparingly and as a last resort!
  // It's generally recommended to use the import method for accessing asset URLs
  // as explained in the “Adding Images and Fonts” section above.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Preferred Method:
Import stylesheets, images, and fonts in JavaScript by placing them alongside your source files.

import React from 'react';
import logo from './logo.png'; // Inform Webpack that this JS file utilizes this image

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

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

export default Header;

Guidelines for adding assets to the public folder

When it is appropriate to use the public folder

Answer 10

If you are utilizing the create-react-app workflow, place your assets in the public folder and utilize the special variable PUBLIC_URL.

When working inside index.html, utilize %PUBLIC_URL%:

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

Within your JS/JSX files, use process.env.PUBLIC_URL:

render() {
  // Take note: only use this sparingly and as a last resort!
  // It's generally recommended to use the import method for accessing asset URLs
  // as explained in the “Adding Images and Fonts” section above.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Preferred Method:
Import stylesheets, images, and fonts in JavaScript by placing them alongside your source files.

import React from 'react';
import logo from './logo.png'; // Inform Webpack that this JS file utilizes this image

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

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

export default Header;

Guidelines for adding assets to the public folder

When it is appropriate to use the public folder

Answer 11

Answer №6

Although this thread is a bit dated, I wanted to contribute my solution using webpack instead of create-react-app.

Many solutions out there recommend changing the path in the html file using <link, but in my case, webpack handles asset linking.

Today, I encountered the same issue where routes like /some_route were working fine, but /some_route/second_level was not, resulting in a message in the console that read:

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

.

I was able to resolve this issue by making an adjustment to my webpack.config.js file:

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

Hopefully, this solution can assist someone else. Thank you!

Answer 12

Although this thread is a bit dated, I wanted to contribute my solution using webpack instead of create-react-app.

Many solutions out there recommend changing the path in the html file using <link, but in my case, webpack handles asset linking.

Today, I encountered the same issue where routes like /some_route were working fine, but /some_route/second_level was not, resulting in a message in the console that read:

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

.

I was able to resolve this issue by making an adjustment to my webpack.config.js file:

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

Hopefully, this solution can assist someone else. Thank you!

Answer 13

Answer №7

Your issue with the script not loading your css is likely stemming from the 404 errors occurring. Your web server may not be properly redirecting all requests for /components/* and routing them to your view via react.

When it comes to fixing your css problems, I've had my own struggles with css imports in jsx files before, so you're definitely not alone! Personally, I prefer using SASS or LESS to compile my css into a bundle.css file using grunt or gulp. Then, I simply load this bundle.css directly into my index.html file. One advantage of using css compilers is that your bundle.css will automatically update whenever you make changes to your .scss or .less files.

I hope this information helps guide you in the right direction.

Best regards,

Answer 14

Your issue with the script not loading your css is likely stemming from the 404 errors occurring. Your web server may not be properly redirecting all requests for /components/* and routing them to your view via react.

When it comes to fixing your css problems, I've had my own struggles with css imports in jsx files before, so you're definitely not alone! Personally, I prefer using SASS or LESS to compile my css into a bundle.css file using grunt or gulp. Then, I simply load this bundle.css directly into my index.html file. One advantage of using css compilers is that your bundle.css will automatically update whenever you make changes to your .scss or .less files.

I hope this information helps guide you in the right direction.

Best regards,

Answer 15

Answer №8

It may seem unconventional, but if you have been using [email protected], consider removing it and switching to [email protected]. I found that react-router can have compatibility issues with history version 5, but this alternative worked for me.

Answer 16

It may seem unconventional, but if you have been using [email protected], consider removing it and switching to [email protected]. I found that react-router can have compatibility issues with history version 5, but this alternative worked for me.

Answer 17

Answer №9

If your application was constructed using webpack,

Modify

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

to

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

Cheers

Answer 18

If your application was constructed using webpack,

Modify

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

to

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

Cheers

`Error occurring with React-router when refreshing nested pages causing CSS not to load`

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

Having difficulty sending emails with attachments using AngularJS

Upon commencing the project, an error arises with reactstrap when attempting to import the library

Is it possible to prevent a webpage from being refreshed?

Learn how to dynamically update the marker's position as it is being dragged using React-Leaflet

Tips for aligning text vertically in flexbox arrangements

Combining several btn-group and btn-group-vertical elements within each other

Unique layout design that organizes calendar using nested divs with flexbox - no

Proper format for implementing recursive API call in React using Redux-Thunk

Unable to apply 100% height to flex child element

Setting Up One Stylesheet Based on Local Preferences

When the browser window is minimized, the top section of the website becomes concealed

Having trouble with Autocomplete Mui Testing? It seems like simulating a change isn't doing the

row-1 css classes on the top in a project built with Blazor

Customize your popover content with Bootstrap settings

How can you show images in Nextjs using a browser if they are not saved in the /public folder?

Ensuring your React Web Application runs indefinitely

Getting the value of a checkbox from a MySQL database

Having difficulty adding items to the shopping cart

Customizing Bootstrap css variables for a unique design