Q: CSS and JavaScript breaking with onEnter with react-router So I was bringing in Material Design Lite and trying to add some components to the page.  For some reason all of the component css was getting overriden by the user agent stylesheet.  I think I spent about an hour trying to figure out why...
Finally after hacking the code apart I narrowed it down to this:
Before entering any route, I'm checking if the user is authorized with the following:
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();
    });
}

My routing looks like this:
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")
);

Now if I remove the onEnter property, eg: 
<Route path="/" component={Application} onEnter={(nextState, replace, callback) => isAuthorized(nextState, replace, callback)}>
to
<Route path="/" component={Application}>
I'm all good.  But I need my authorization!
Anyone know whats going on?
BAD: 

GOOD:

Guessing this is causing issues:
If callback is listed as a 3rd argument, this hook will run asynchronously, and the transition will block until callback is called.
Alright updated to:
<Route path="/" component={Application} onEnter={(nextState, replace) => isAuthorized(nextState, replace)}>
With that in place, the styling/js stuff I need is working but obviously we route to the path without checking that the user is authorized since the callback isn't part of the loop....

Actually after some more testing, it appears anytime I change routes thats where the problem occurs.
After removing onEnter and continuing developing I notice that whenever I switch routes, the user agent stylesheet becomes king on the new route.

A: This solves it:
componentDidMount(){
   componentHandler.upgradeDom();
}

4 hours on this.  I've tried just about everything imaginable...
I did learn quite a few things about react-router, react, material design, MUI, MDL, etc.  I actually got at the root cause after reading muicss.com:
https://www.muicss.com/docs/v1/css-js/boilerplate-html
In order to make the framework easy to work with, MUI uses CSS3 features to detect when MUI components are added to the DOM and automatically attaches event handlers. Here's an example of a dynamically created button that supports the ripple effect automatically: 
After reading that I got to thinking about how MDL attaches the handlers to the MDL components...Doing some more reading I stumbled upon componentHandler.upgradeDom().  
Elegant?  eh...I'll take it for now but I'll definitely research this further, not a fan of upgrading the DOM upon every transition...
