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')
);How to solve this?
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