javascript - CSS和JavaScript用react-router的onEnter破坏

因此，我引入了Material Design Lite，并尝试向页面添加一些组件。由于某种原因，所有组件css都被user agent stylesheet覆盖。我想我花了大约一个小时来弄清楚为什么...

最后，在将代码分开之后，我将其范围缩小到:

在输入任何路线之前，我正在检查用户是否具有以下权限:

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")
);

现在，如果我删除onEnter属性，例如:
<Route path="/" component={Application} onEnter={(nextState, replace, callback) => isAuthorized(nextState, replace, callback)}>
至
<Route path="/" component={Application}>
我都很好但是我需要我的授权!

有人知道发生了什么吗？

坏:


好:


猜测这会导致问题:

如果将callback作为第3个参数列出，则此挂钩将异步运行，并且转换将阻塞，直到调用callback。

好的更新为:<Route path="/" component={Application} onEnter={(nextState, replace) => isAuthorized(nextState, replace)}>
有了这个，我需要的样式/ js工作就可以了，但是显然我们路由到路径而没有检查用户是否被授权，因为回调不是循环的一部分...。

实际上，经过更多测试后，只要我更改发生问题的路线，它就会出现。

删除onEnter并继续开发后，我注意到无论何时切换路线，用户代理样式表都将成为新路线的国王。

最佳答案

这解决了它:

componentDidMount(){
   componentHandler.upgradeDom();
}

4个小时。我已经尝试了几乎所有可以想象的...

我确实学习了很多有关react-router，react， Material 设计，MUI，MDL等的知识。在阅读muicss.com之后，我实际上是找到了根本原因:

https://www.muicss.com/docs/v1/css-js/boilerplate-html

为了使框架易于使用，MUI使用CSS3功能来检测何时将MUI组件添加到DOM并自动附加事件处理程序。这是一个动态创建的按钮示例，该按钮自动支持波纹效果:

阅读完之后，我开始思考MDL如何将处理程序附加到MDL组件上。做更多的阅读后，我偶然发现componentHandler.upgradeDom()。

优雅？嗯...我现在就讲，但是我一定会进一步研究，而不是喜欢在每次过渡时都升级DOM ...

关于javascript - CSS和JavaScript用react-router的onEnter破坏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39562984/