React-router: Private route using auth leads to unnecessary route change.

[jasan-s]

Version

4.1.2

Test Case

Steps to reproduce

I'm implementing private route like so:

function PrivateRoute({component: Component, authed, emailVerified, ...rest}) {
  return (
    <Route
      {...rest}
      render={props =>
        authed === true
          ? <Component {...props} />
          : <Redirect to={{pathname: '/', state: {from: props.location}}} />}/>
  )
}

Expected Behavior

authed is persisted through page refresh through using redux-persist
So on page refresh or reload, if authed prop is true then router should render <Component /> without ever going to path "/"

Actual Behavior

With authed === true (persisted)
reloading the page or refreshing it leads to the following actions taking place(checked redux devtools)
the action:
"@@router/LOCATION_CHANGE" runs and takes it to the correct secure route but then "@@router/LOCATION_CHANGE" runs again and it redirects to "/" for a moment and finally
"@@router/LOCATION_CHANGE" runs again and directs route back to the secure path, even though authed === true through all this

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!