Authentication in React - reactjs

Question

When the user successfully logs in, the user must be re-directed into another page. This page is not accessible if you are not logged in.
Here is the login form code
class LoginForm extends React.Component {
handleFormSubmit = e => {
e.preventDefault();
const user = e.target.elements.user.value;
const password = e.target.elements.password.value;
this.props.onAuth(user, password);
};
componentDidUpdate() {
console.log(this.props.successLogin)
};
Here is the mapStateToProps and mapDispatchToProps function
const mapStateToProps = (state) => {
return {
error: state.error,
successLogin: state.token
}
};
mapDispatchToProps = dispatch => {
return {
onAuth: (username, password) => dispatch(actions.authLogin(username, password))
}
};
And here is its action
export const authSuccess = token => {
return {
type: actionTypes.AUTH_SUCCESS,
token: token
}
};
Here is the code in the login page
const PrivateRoute = ({component: Component, ...rest}) => (
<Route {...rest} render={(props) => (
rest.auth
? <Component {...props}/>
:
<Redirect to='/'/>
)}/>
);
Here is the routing link
<PrivateRoute path="/Main_Page" exact component={Main_Page} auth={this.props.isAuthenticated}/>
And its connect
const mapStateToProps = state => {
return {
isAuthenticated: state.token !== null
};
};
The console.log prints twice. ones null and ones with the actual token.
My question is what is wrong in the logic that is making the console.log(this.props.successLogin) print ones null then the token, and vice versa when logging out ?
The challenge this poses is my page ends up re-directed to <Redirect to='/'/>``, although I am authenticated, and I can access all thePrivateRoute path`

Answer 1

You will have to check if user successfully authenticated or nor before rendering
{this.props.isAuthenticated && <PrivateRoute path="/Main_Page" exact component={Main_Page} auth={this.props.isAuthenticated}/>}

Answer 2

Here is how I fixed it
<Route exact path="/"render={() => (this.props.isAuthenticated ? (
<Redirect to="/Main_Page"/>) : (
<Log_in_Page/>