title: How to create a protected route after login in reactjs
body: <p>I'm quite new in react. I'm trying to create a project where users would have to login to access a page and I want to protect one route that should be accessible only after succesful login. I don't want fancy user management or anything like that so please don't recommend context or redux. I just want my localhost:3000/editor to be accessible only after login and if someone tries to access /editor without login then they are redirected to login page. so something like isAuthenicated: true/false would be fine in my case I believe but I'm not sure how to pass that in my webapp. I would highly if someone can show me how to do that?
  I created this but many errors</p>
  
  <p>App.js</p>
  
  <pre><code>import React, {useState} from "react";
  import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
  import "./App.css";
  import Login from "./login";
  import Dashboard from "./dashboard";
  function App() {
   const [loggedIN, setLoggedIN]=useState(false);
    let privateRoutes = null;
     if(loggedIN){
        privateRoutes =(
          &lt;Route path="/dashboard" component={Dashboard} /&gt;
        )}  
    return (
    &lt;&gt;  
  
    &lt;Router&gt;
        &lt;div className="container"&gt;
          &lt;nav className="navbar navbar-expand-lg navheader"&gt;
            &lt;div className="collapse navbar-collapse"&gt;
              &lt;ul className="navbar-nav mr-auto"&gt;
                &lt;li className="nav-item"&gt;
                  &lt;Link to={"/Login"} className="nav-link"&gt;
                    Login
                  &lt;/Link&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
          &lt;br /&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/login" component={Login} /&gt;
            {privateRoutes}
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    &lt;/&gt;);
  }
  export default App;
  
  </code></pre>
  
  <p>login.js</p>
  
  <pre><code>import React, { Component } from "react";
  import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
  import AppBar from "material-ui/AppBar";
  import RaisedButton from "material-ui/RaisedButton";
  import TextField from "material-ui/TextField";
  import { Link } from "react-router-dom";
  import "./loginForm.css";
  class Login extends Component {
    constructor(props) {
      super(props);
      this.state = {
        email: "",
        password: ""
      };
      this.onchange = this.onchange.bind(this);
    }
    onchange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }
    performLogin = async () =&gt; {
      var body = {
        password: this.state.password,
        email: this.state.email
      };
      const options = {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json"
        },
        body: JSON.stringify(body)
      };
      const url = "/api/authenticate";
      try {
        const response = await fetch(url, options);
        const text = await response.text();
        if (text === "redirect") {
          this.props.setState({loggedIN: true})
          this.props.history.push(`/dashboard`);
        } else {
          console.log("login failed");
          window.alert("login failed");
        }
      } catch (error) {
        console.error(error);
      }
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;div className="loginForm"&gt;
            &lt;MuiThemeProvider&gt;
              &lt;TextField
                hintText="Enter your Email"
                floatingLabelText="Email"
  
                onChange={(event, newValue) =&gt; this.setState({ email: newValue })}
              /&gt;
  
              &lt;br /&gt;
              &lt;TextField
                type="password"
                hintText="Enter your password"
                floatingLabelText="password"
  
                onChange={(event, newValue) =&gt;
                  this.setState({ password: newValue })
                }
              /&gt;
  
              &lt;br /&gt;
              &lt;RaisedButton
                label="Submit"
                primary={true}
                style={style}
                onClick={event =&gt; this.performLogin(event)}
              /&gt;
  
            &lt;/MuiThemeProvider&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  const style = {
    margin: 15
  };
  export default Login;
  </code></pre>
  
  <p>editor page</p>
  
  <pre><code>import React, { Component } from "react";
  
  class Dashboard extends Component {
  constructor(props) {
      super(props);
  
    }
  logout=()=&gt;{
    this.setState({loggedIN: false)}
  }  
  render() {
      return (
           &lt;div&gt;hello&lt;/div&gt;;
          &lt;button onCLick={logout}&gt;Logout&lt;/button&gt;  
          )
     }
  }
  export default Dashboard;
  </code></pre>
  
  <p>edit: <a href="https://codesandbox.io/s/beautiful-shirley-nn235" rel="nofollow noreferrer">codesandbox</a></p>