title: How to do Authentication in react using protected routes
body: <p>I am using useContext hook to sore the state to check if user loggedin or not and using protectedRoutes to protect my pages from access.
  But after login, if i reload/refresh any of the proteted page, it again takes me to the login screen. WHY?</p>
  <pre><code>const [userstate, dispatch] = useReducer(reducer, initialvalue)
  return (
  &lt;&gt;
  &lt;Mycontext.Provider value={{userstate, dispatch}}&gt;
  &lt;Routes&gt;
    &lt;Route path = &quot;login&quot; element = {&lt;Login/&gt;} /&gt;
     &lt;Route path = &quot;/&quot; element = {&lt;ProtectedRoutes /&gt;}&gt;
       &lt;Route path=&quot;/&quot; element={&lt;dashboard /&gt;} /&gt;
       &lt;Route path=&quot;welcome&quot; element={&lt;dashboard /&gt;} /&gt;
       &lt;Route path=&quot;page1&quot; element={&lt;page1 /&gt;} /&gt;
       &lt;Route path=&quot;page2&quot; element={&lt;page2 /&gt;} /&gt;
     &lt;/Route&gt;
    &lt;Route path = &quot;*&quot; element = {&lt;Error/&gt;} /&gt;
  &lt;/Routes&gt;
  &lt;/Mycontext.Provider&gt;
  </code></pre>
  <p>I am using dispatch in the login and logout buttons to set state true or false in the reducer with payload.
  How can I solve this, give some solution on this.</p>