React：コンポーネントがレンダリングされたときにのみコンポーネントのCSSをロードする

Question

# MyComponent.js 

import React from 'react' 
import './MyComponentStyle.css' 

export default class MyComponent extends React.Component { 
    .... 
} 


# App.js 

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Route, Switch, BrowserRouter } from 'react-router-dom' 
import MyComponent from './MyComponent' 
import PageNotFound from './PageNotFound' 

ReactDOM.render(
    <BrowserRouter> 
    <Switch> 
     <Route exact path='/mycomponent' component={MyComponent}/> 
     <Route component={PageNotFound} /> 
     </Switch> 
    </BrowserRouter>, 
    document.getElementById('root')); 

/mycomponentに移動すると、MyComponentはCSSでレンダリングされます。しかし、私が他のURLに行くと、MyComponentStyle.cssはまだhtmlのHeadで見ることができます。コンポーネントがそのルート上でレンダリングされるときにのみ、それぞれのコンポーネントをCSSでレンダリングする方法はありますか？

Answer 1

Webpack v2にはdynamic importという機能がimport()で導入されました。 CSSインポートをrenderまたはcomponentWillMountメソッドに移動し、ブール型変数を使用すると、一度だけロードすることができます。

import React from 'react' 

let cssLoaded = false; 

export default class MyComponent extends React.Component { 
    render() { 
     if (cssLoaded === false) { 
      cssLoaded = true; 
      import('./MyComponentStyle.css'); 
     } 

     // other stuff 
    } 
}