Styles not working with React-router

0

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?

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

We will be happy to hear your thoughts

Leave a reply

CodeROG
Logo
Reset Password
Compare items
  • Total (0)
Compare
0
Shopping cart