0

我正在使用react-router 2.4.0和React 15.2.1Webpack。我看到样式正在通过 IndexRoute 组件（在此示例中为 Main）加载，尽管它没有被加载。

考虑以下来源：

AppRouter.js

<Router history={history}>
    <Route path='/' component={App}>
        <IndexRoute component={Main} onEnter={requireLogin} />
        <Route path='login' component={LoginPage} />
    </Route>
</Router>

function requireLogin(nextState, replace) {
    if (!getIsUserLoggedIn()) {
        replace('/login');
    }
}

主.js

...

import '../styles/Main.scss';

...

webpack.config.js：

...

module: {
    loaders: [
        {
            test: /\.scss$/,
            loader: 'style!css!sass!postcss-loader'
        }
    ]
},
postcss: [autoprefixer({ browsers: ['last 2 versions'] })]

当导航到/并且用户退出时，路由器会重定向到/login，但是所有加载的样式Main.scss都被附加到 DOM 中。

我怎样才能防止这种情况发生，并且只加载LoginPage组件样式？

4

0 回答 0