Styles not working with React-router

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';

  <Router history={browserHistory}>
    <Route path="/" component={Dashboard}/>
    <Route path="/components/:name" component={WidgetComponent}/>
    <Route path="*" component={Dashboard}/>

How to solve this?

to this:

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

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top