react-router-dom v4 routing with guest and authorized routes - reactjs

Question

I cant seem to understand the proper way of dealing with guest and authorized routes. I checked out the given example https://reacttraining.com/react-router/web/example/auth-workflow but that dosnt block the authorized user to open /login route and it seems all of the given examples do the same.
I tried doing something like this:
export default function requireGuest(WrappedComponent) {
class Guest extends Component {
render() {
if (this.props.authenticated) {
return <Redirect to="/agenda"/>
}
return <WrappedComponent {...this.props}/>
}
}
function mapStateToProps(state) {
return {authenticated: isLoggedInSelector(state)}
}
const withConnect = connect(mapStateToProps, null, null, {pure: false});
return compose(
withConnect,
withRouter
)(Guest);
}
class Authorized extends Component {
render() {
if (!this.props.authenticated) {
return <Redirect to="/login"/>
}
return <WrappedComponent {...this.props}/>
}
}
function mapStateToProps(state) {
return {authenticated: isLoggedInSelector(state)}
}
const withConnect = connect(mapStateToProps, null, null, {pure: false});
return compose(
withConnect,
withRouter
)(Authorized);
}
And then in the main container do something like this:
<Route path='/login' component={RequireGuest(LoginPage)}/>
<Route path='/register' component={RequireGuest(RegisterPage)}/>
<Route path="/dashboard" component={RequireAuthorization(DashboardPage)}/>
But when i try to navigate anywhere else the path updates and the state updates too, but there is no rerenders and no redirects.
Then I tried something like this:
class GuestRoutes extends Component {
render() {
const {loggedIn} = this.props;
return (
<Route
render={props =>
loggedIn ? (
<Redirect
to={{
pathname: "/agenda",
state: {from: props.location}
}}
/>
) : (
<Switch>
<Route path='/login' component={LoginPage}/>
<Route path='/register' component={RegisterPage}/>
<Redirect to='/login'/>
</Switch>
)
}
/>
);
}
}
class AuthorizedRoutes extends Component {
render() {
const {loggedIn} = this.props;
return (
<Route
render={props =>
loggedIn ? (
<Switch>
<Route exact path="/dashboard" component={DashboardPage}/>
<Redirect to="/dashboard"/>
</Switch>
) :
(<Redirect
to={{
pathname: "/login",
state: {from: props.location}
}}
/>)
}
/>
);
}
}
And in the main container
<Switch>
<GuestRoutes/>
<AuthorizedRoutes/>
</Switch>
But then if the user is logged in, the guest routes keep getting rendered until it gets the depth error.
Im been trying to figure this out for quite a few hours so im getting desperate here. So any examples or anything that has routes protected based on the authorization state