当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Import component dynamically in react

问题描述:

I am developing a react app using create-react-app tool. The main script more-less like this:

import React from 'react'

import {render} from 'react-dom'

import {ApolloProvider} from 'react-apollo';

import {BrowserRouter, Match, Miss} from 'react-router'

import client from './apollo';

import Theme from './theme';

import Admin from './admin';

const Main = React.createClass({

render: function(){

return (

<ApolloProvider client={client}>

<BrowserRouter>

<div id="router" style={{height: "100vh"}}>

<Match pattern="/admin/:page?/:action?/:param1?/:param2?/:param3?/:param4?/:param5?" component={Admin}/>

<Miss component={Theme}/>

</div>

</BrowserRouter>

</ApolloProvider>

)

}

});

render(<Main/>, document.getElementById('root'));

The problem is, when I access all pages under /admin/... all css files imported in component also loaded.

And also, if I open the home page, which is component, all css files under component also loaded.

This makes the css crashes and inconsistent.

I know that create-react-app not supports CSS modules, but I was thingking about import the component dynamically. So react wouldn't import the component if we don't want it to be rendered.

Like if I open admin area, then react don't have to import component, so all css files under it not loaded also.

Is there any way?

分享给朋友:
您可能感兴趣的文章:
随机阅读: