Miss producing strange behavior when using MatchWhenAuthorized

[trappar]

Using 4.0.0-alpha.5, and in the situation described in the title, like...

<Match pattern="/login" component={LoginPage}/>
<MatchWhenAuthorized pattern="/secured" component={SecuredPage}/>
<Miss component={NoMatch}/>

I click a link to go to /secured and on that page in addition to the normal page content I'm seeing the NoMatch component being rendered. I then click on a link again to go to /secured and the NoMatch component disappears.

I would assume this is because the actual Match component isn't a direct sibling of the Miss component when using MatchWhenAuthorized, but then how is it working after a second link click?

Here's my MatchWhenAuthorized component (using MobX)

import React from 'react';
import {Match, Redirect} from 'react-router';
import {observer} from 'mobx-react';

export default observer(['user'], MatchWhenAuthorized);

function MatchWhenAuthorized({ component: Component, user, ...rest }) {
  return (
    <Match {...rest} render={props => (
      user.loggedIn ? (
        <Component {...props}/>
      ) : (
        <Redirect to={{ pathname: '/login', state: { from: props.location } }}/>
      )
    )}/>
  );
}

[alisd23]

Yep this is a bug. The original issue was #4035, and I think we thought it was fixed, but clearly not.
It's caused by that mobx observer HOC wrapper implementing shouldComponentUpdate I think, as the same problem exists with a Redux connect HOC.

There's also a failing test PR being tracked at #4047.

[trappar]

I modified my MatchWhenAuthorized component so it no longer makes use of observer and instead I'm passing the user in directly. That fixed the issue, so you're definitely right about the cause.

So for anyone who finds this and is looking for a solution - that will work for now.

[ryanflorence]

the sCU issues are on my mind in other issues too, so I'm going to close this. There will be docs/examples on how to get around it, and what to watch out for (or maybe we can avoid the problem altogether).