如何在改变路线时改变风格？

路线（反应路线）发生变化时，如何加载或删除与新页面相关的样式？我真的不知道谁负责这个功能，反应或webpack或反应路由器。但现在，当主页加载时，项目中的所有样式都会加载，我该怎么办？如何在改变路线时改变风格？

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 {}

一样的代码，当我访问 'http://localhost:8080'（即首页），page1style.css和page2style.css将加载，但我仍然不能访问page1和page2。

来源

2017-07-21 CoderLim

你可以发布一些你可能已经拥有的代码吗？另外，你是否使用任何主题材料UI等 – XPLOT1ON

@ XPLOT1ON我已经使用'antd design'，但我不认为这是重要的。反应项目是否存在问题 - 当主页加载时，所有样式都会加载？ – CoderLim

通过使用webpack你可以在需要的时候加载组件，这里是链接：** https：//blog.lavrton.com/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6** – mindaJalaj

改变它像这样

第1页：

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

你的代码确实是加载一般的CSS，这就是为什么它加载它的全部。这种方式将更模块化，易于操作

来源

2017-07-21 06:21:36 Muhaimin

我已经尝试过了，但它不起作用。 T_T – CoderLim

您是否使用webpack作为您的捆绑软件？ – Muhaimin

是的，我这样做，我已经尝试过'css-loader'模块，但它不工作。 – CoderLim

如何在改变路线时改变风格？

回答

相关问题