在更改路线时如何更改样式？

Question

When route(react-route) changing, how can I load or remove the styles relevant to the new page? I really don't know who is in charge of this function , react or webpack or react-router. But now, when the home page loaded, all of the styles in project will load, how could I do?

Routes: 

<Router history={hashHistory}>
 <IndexRoute component={HomePage}/>
 <Route path="/page1" component={Page1}/>
 <Route path="/page2" component={Page2}/>
</Router>

Page1: 

 import './page1style.css';
 export default class Page1 extends React.Component {}

Page2: 
  import './page2style.css';
  export default class Page2 extends React.Component {}

Like the code, when I visit ' http://localhost:8080 '(ie HomePage), page1style.css and page2style.css will load, but I still not visit page1 and page2 .

Answer 1

change it like this

Page1:

 import style from './page1style.css';
 export default class Page1 extends React.Component {
   render () {
     return <div className={style.someClass} />
   }
 }

what your code does is to load as general css and that's why it load all of it. This way would be more modular and easy to handle