CSS和JavaScript与带有react路由器的onEnter决裂

所以我引入了Material Design Lite，并试图在页面中添加一些组件。由于某种原因，

用户代理样式表

覆盖了所有组件css。我想我花了一个小时想弄明白为什么

最后，在破解代码之后，我将其缩小为：

在进入任何路线之前，我将检查用户是否获得以下授权：

function isAuthorized(nextState, replace, callback) {
    if (nextState.location.pathname === "/login") {
        callback();
        return;
    }
    const state = store.getState();
    if (state.user && state.user.loggedIn === true) {
        callback();
        return;
    }

    retrieveUser((store.dispatch), (error) => {
        if (!!error) {
            replace("/login");
        }
        callback();
    });
}

我的路由如下所示：

render(
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={Application} onEnter={(nextState, replace, callback) => isAuthorized(nextState, replace, callback)}>
                <IndexRoute component={DashboardPage} />
                <Route path="login" component={LoginPage} />
                <Route path="dashboard" component={DashboardPage} />
                <Route path="items" component={ItemPage} />
                <Route path="item-categories" component={DashboardPage} />
                <Route path="modifiers" component={DashboardPage} />
                <Route path="taxes" component={DashboardPage} />
                <Route path="discounts" component={DashboardPage} />
                <Route path="orders" component={DashboardPage} />
                <Route path="users" component={DashboardPage} />
                <Redirect to="dashboard" from="*" />
            </Route>
        </Router>
    </Provider>,
    document.getElementById("application")
);

渲染(
isAuthorized（nextState、replace、callback）}>
,
document.getElementById（“应用程序”）
);

现在，如果我删除

onEnter

属性，例如：

isAuthorized（nextState，replace，callback）}>

到

我很好。但我需要我的授权

有人知道发生了什么吗

坏的：

好:

猜测这会导致问题：

如果callback被列为第三个参数，那么这个钩子将异步运行，转换将被阻止，直到调用callback为止。

更新至：

isAuthorized（nextState，replace）}>

有了它，我需要的Styleing/js东西就可以工作了，但显然我们在不检查用户是否被授权的情况下路由到路径，因为回调不是循环的一部分

---

实际上，经过更多的测试后，每当我改变路线时，就会出现问题

在删除OneNet并继续开发之后，我注意到每当我切换路由时，用户代理样式表就成为新路由上的国王。

这就解决了这个问题：

componentDidMount(){
   componentHandler.upgradeDom();
}

4个小时。我已经尝试了一切可以想象的

我确实学到了很多关于react路由器、react、材料设计、MUI、MDL等的知识。在阅读了muicss.com之后，我实际上找到了根本原因：

为了使框架易于使用，MUI使用CSS3特性来检测何时将MUI组件添加到DOM并自动附加事件处理程序。下面是一个动态创建的按钮示例，它自动支持连锁反应：

读了这篇文章之后，我开始思考MDL是如何将处理程序附加到MDL组件上的……在进行更多的阅读时，我偶然发现了

componentHandler.upgradeDom（）

---

优雅？呃…我现在就要看了，但我肯定会进一步研究，我不喜欢每次转换都升级DOM…

你能找到更好的解决方案吗？是的，我停止使用MDL，只是开始使用Material UI:p。老实说，这不值得这么麻烦，MDL最近也没有得到很多支持。我忙于5个开源项目、工作和一份教学工作，所以我真的没有多少时间来贡献自己的力量，但有很多内在的原因说明为什么他们需要调用upgradeDom（）