javascript - CSS 和 JavaScript 通过 React-router 打破 onEnter

Question

所以我引入了 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}>

我一切都好。但我需要我的授权!

有人知道这是怎么回事吗？

坏:

好:

猜测这会导致问题:

如果回调被列为第三个参数，则该 Hook 将异步运行，并且转换将阻塞，直到调用回调为止。

好的，更新为: <Route path="/" component={Application} onEnter={(nextState, replace) => isAuthorized(nextState, replace)}>

有了这个，我需要的样式/js 东西就可以工作了，但显然我们路由到路径而不检查用户是否被授权，因为回调不是循环的一部分......

<小时/>

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

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

Answer 1

这解决了它:

componentDidMount(){
   componentHandler.upgradeDom();
}

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

我确实学到了很多关于react-router、react、material design、MUI、MDL等的知识。在阅读了muicss.com后，我实际上找到了根本原因:

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

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

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

优雅？呃...我现在就接受它，但我肯定会进一步研究这一点，不喜欢在每次转换时升级 DOM...