title: How to create a protected route?
body: <p>How to create a protected route with react-router-dom and storing the response in local storage, so that when a user tries to open next time they can view their details again. After login, they should redirect to the dashboard page.</p>
  <p>All functionality is added in ContextApi.
  Codesandbox link : <a href="https://codesandbox.io/s/react-context-template-forked-oeere" rel="noreferrer">Code</a></p>
  <p>I tried but was not able to achieve it</p>
  <p>Route Page</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useContext } from &quot;react&quot;;
  import { globalC } from &quot;./context&quot;;
  import { Route, Switch, BrowserRouter } from &quot;react-router-dom&quot;;
  import About from &quot;./About&quot;;
  import Dashboard from &quot;./Dashboard&quot;;
  import Login from &quot;./Login&quot;;
  import PageNotFound from &quot;./PageNotFound&quot;;
  
  function Routes() {
    const { authLogin } = useContext(globalC);
    console.log(&quot;authLogin&quot;, authLogin);
  
    return (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          {authLogin ? (
            &lt;&gt;
              &lt;Route path=&quot;/dashboard&quot; component={Dashboard} exact /&gt;
              &lt;Route exact path=&quot;/About&quot; component={About} /&gt;
            &lt;/&gt;
          ) : (
            &lt;Route path=&quot;/&quot; component={Login} exact /&gt;
          )}
  
          &lt;Route component={PageNotFound} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  export default Routes;
  
  </code></pre>
  <p>Context Page</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component, createContext } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  export const globalC = createContext();
  
  export class Gprov extends Component {
    state = {
      authLogin: null,
      authLoginerror: null
    };
    componentDidMount() {
      var localData = JSON.parse(localStorage.getItem(&quot;loginDetail&quot;));
      if (localData) {
        this.setState({
          authLogin: localData
        });
      }
    }
  
    loginData = async () =&gt; {
      let payload = {
        token: &quot;ctz43XoULrgv_0p1pvq7tA&quot;,
        data: {
          name: &quot;nameFirst&quot;,
          email: &quot;internetEmail&quot;,
          phone: &quot;phoneHome&quot;,
          _repeat: 300
        }
      };
      await axios
        .post(`https://app.fakejson.com/q`, payload)
        .then((res) =&gt; {
          if (res.status === 200) {
            this.setState({
              authLogin: res.data
            });
            localStorage.setItem(&quot;loginDetail&quot;, JSON.stringify(res.data));
          }
        })
        .catch((err) =&gt;
          this.setState({
            authLoginerror: err
          })
        );
    };
    render() {
      // console.log(localStorage.getItem(&quot;loginDetail&quot;));
      return (
        &lt;globalC.Provider
          value={{
            ...this.state,
            loginData: this.loginData
          }}
        &gt;
          {this.props.children}
        &lt;/globalC.Provider&gt;
      );
    }
  }
  
  </code></pre>