Private Route React Router And Redux - reactjs

Question

I am trying to build a simple React app with auth flow and private route, I am first checking if the user signed in and redirect it to specify a private route, but after the app goes to the private route she doesn't have the user info here is my code :
App.Js
class App extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
console.log('AUTH:' , this.props.signedIn);
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/" render={() => <Redirect to={this.props.signedIn ? '/dashboard' : '/login'}/>}/>
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" ><DashboardLayout/></PrivateRoute>
</Switch>
</BrowserRouter>
</div>
);
}
}
const mapStateToProps = state => ({
signedIn: state.auth.signedIn
});
const mapDispatchToProps = dispatch => ({
fetchUser: () => dispatch(fetchUser())
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
PrivateRoute.js
const PrivateRoute = ({children, signedIn, ...rest}) => {
const checkToken = (location) => {
console.log("SignedIn", signedIn);
if(signedIn) {
return children;
}
else {
return <Redirect to={{pathname: '/login', state: {from : location}}}/>
}
};
return <Route
{...rest}
render={({location}) => checkToken(location)}
/>;
};
const mapStateToProps = state => ({
signedIn: state.auth.signedIn
});
export default connect(mapStateToProps, null)(PrivateRoute)
So, in my google console, I see my console log AUTH is set to false from the App.js and also my console log Signed In is set to false, but after a rerender my console log AUTH from the app is set to True but doesn't go to the PrivateRoute again

Answer 1

I use 3 returns for PrivateRoute
children - for authorized users
Redirect to login - for not authorized users
and some LoadingComponent - for waiting of fetching user
We've prepared list of Loading components with different structure of placeholders, they look like placeholders in youtube on page loading
const PrivateRoute = ({children, signedIn, isAuthReady, customPlaceholder, ...rest}) => {
return (
<Route {...rest} render={(location) => {
if (!isAuthReady) {
return customPlaceholder || <Placeholder />
}
if (signedIn) {
return children;
}
return <Redirect to={{pathname: '/login', state: {from : location}}} />
}} />
)
}
const mapStateToProps = state => ({
signedIn: state.auth.signedIn,
isAuthReady: state.auth.isAuthReady
});
export default connect(mapStateToProps)(PrivateRoute)