title: How to open home page after successful login in reactjs?
body: <p>When login success it redirects me to Main Page, but when I go to browser and open <a href="http://localhost:3000/MainPage" rel="nofollow noreferrer">http://localhost:3000/MainPage</a> it shows me Main Page (actually It must throw me to Login Page, because I am not logged in). In my case I can access Main Page without logging in by using url. What should I do in order to redirect unlogged users to LogIn page?</p>
  
  <p>In my LogIn.js I am setting loggedIn state to false  </p>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
  render() {
  return (
    &lt;BrowserRouter&gt;
     &lt;Switch&gt;
          &lt;Route exact path="/" component={ LogIn }&gt;&lt;/Route&gt;
          &lt;Route path='/' component={ MainPage }&gt;&lt;/Route&gt;
     &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;
  );
  }
  }
  
  export default App; 
  </code></pre>
  
  <p>LogIn.js</p>
  
  <pre><code>const userIdRegex = RegExp(
  /^[uU]*1+[0-9]*$/
  );
  
  class LogIn extends Component {
  
  constructor(props) {
  super(props);
  
  this.state = {
    userId: null,
    password: null,
    fullName: undefined,
    responseError: false,
    loggedIn: false,
    formErrors: {
      userId: "",
      password: ""
    }
  };
  }
  
   handleSubmit = e =&gt; {
    e.preventDefault();
  
    axios.post('url', { 
     userId: 
    e.target.elements.userId.value,
    password: e.target.elements.password.value })
      .then((response) =&gt; {
        console.log(response);
        this.setState({ fullName: response.data.fullName, loggedIn: true });
        console.log(this.state.fullName);
        console.log(this.state.loggedIn);
      }).catch((error) =&gt; {
        console.log(error);
        this.setState({ responseError: true });
      });
  
    };
    handleChange = e =&gt; {
  e.preventDefault();
  const { name, value } = e.target;
  let formErrors = { ...this.state.formErrors };
  
  switch (name) {
  
    case "userId":
      formErrors.userId = userIdRegex.test(value)
        ? ""
        : "Invalid user ID";
      break;
    case "password":
      formErrors.password =
        value.length &lt; 8 ? "Invalid password" : "";
      break;
    default:
      break;
  }
  
  this.setState({ formErrors, [name]: value }, () =&gt; 
    console.log(this.state));
    };
   render() {
  const { formErrors } = this.state;
  const responseError = this.state.responseError;
  // const loggedIn = this.state.loggedIn;
  // const { from } = this.props.location.state || '/';
  if (this.state.loggedIn == true) {
    return &lt;Redirect to="./MainPage" /&gt;;
  }
  return (
    &lt;div className="wrapper"&gt;
      &lt;div className="form-wrapper"&gt;
      &lt;img src={Logo} className="App-logo" alt="Logo" /&gt;
      &lt;p&gt;To Log In enter your user ID and password.&lt;/p&gt;
        &lt;form onSubmit={this.handleSubmit} noValidate&gt;      
          &lt;div className="userId"&gt;
            &lt;input
              autoFocus
              className={formErrors.userId.length &gt; 0 ? "error" : null}
              placeholder="User ID"
              type="text"
              name="userId"
              noValidate
              defaultValue="u"
              onChange={this.handleChange}
            /&gt;
            {formErrors.userId.length &gt; 0 &amp;&amp; (
              &lt;span className="errorMessage"&gt;{formErrors.userId}&lt;/span&gt;
            )}
          &lt;/div&gt;
          &lt;div className="password"&gt;
            &lt;input
              className={formErrors.password.length &gt; 0 ? "error" : null}
              placeholder="Password"
              type="password"
              name="password"
              noValidate
              onChange={this.handleChange}
            /&gt;
            {formErrors.password.length &gt; 0 &amp;&amp; (
              &lt;span className="errorMessage"&gt;{formErrors.password}&lt;/span&gt;
            )}
          &lt;/div&gt;
          &lt;div className="createAccount"&gt;
            &lt;button type="submit" disabled={!this.state.userId} disabled= 
   {!this.state.password}&gt;Log in&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        { responseError==true &amp;&amp; (
          &lt;span className="response-error errorMessage"&gt;Please enter valid 
    user values&lt;/span&gt;
        ) }
      &lt;/div&gt;
  
    &lt;/div&gt;
    )}
   }
  
  export default LogIn;
  </code></pre>
  
  <p>MainPage.js</p>
  
  <pre><code>class MainPage extends Component {
  state = {
      loggedIn: false
  }
  
  render(){
      if (this.state.loggedIn) {
          return &lt;Redirect to="/" /&gt;;
      }
      console.log(this.state);
      return(
      &lt;div&gt;
          &lt;p&gt;Welcome&lt;/p&gt;
      &lt;/div&gt;
  
      );
  }
  }
  export default MainPage;
  </code></pre>