title: How to pass user name to react page?
body: <p>I have this react code.</p>
  
  <p>Apps.js</p>
  
  <pre><code>// react-router-auth
  import React, {useState} from "react";
  import { BrowserRouter as Router, Link, Route } from "react-router-dom";
  import PrivateRoute from './PrivateRoute';
  import Home from './pages/Home';
  import Admin from './pages/Admin';
  import Login from "./pages/Login";
  import Signup from "./pages/Signup";
  
  import { AuthContext } from "./context/auth";
  
  function App(props) {
      const [authTokens, setAuthTokens] = useState();
      const setTokens = (data) =&gt; {
          localStorage.setItem("tokens", JSON.stringify(data));
          setAuthTokens(data);
      }
  
      return (
          &lt;AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }}&gt;
              &lt;Router&gt;
                  &lt;div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;Link to="/"&gt;Home Page&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;Link to={{ pathname: "/admin", state:{username: props.location}}}&gt;Admin Page&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;Link to={{ pathname: "/login", state:{referer: props.location}}}&gt;Login Page&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;Link to={{ pathname: "/signup", state:{referer: props.location}}}&gt;Sign Up Page&lt;/Link&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;p&gt;
                          stuff
                      &lt;/p&gt;
  
                      &lt;Route exact path="/" component={Home} /&gt;
                      &lt;Route path="/login" component={Login} /&gt;
                      &lt;Route path="/signup" component={Signup} /&gt;
                      &lt;PrivateRoute path="/admin" component={Admin} /&gt;
  
                  &lt;/div&gt;
              &lt;/Router&gt;
          &lt;/AuthContext.Provider&gt;);
  }
  
  export default App;
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>import React, { useState } from "react";
  import { Link, Redirect } from 'react-router-dom';
  import axios from 'axios';
  import logoImg from "../img/logo.svg";
  import { Card, Logo, Form, Input, Button, Error } from '../components/AuthForms';
  import { useAuth } from "../context/auth";
  
  function Login(props) {
      const [isLoggedIn, setLoggedIn] = useState(false);
      const [isError, setIsError] = useState(false);
      const [userName, setUserName] = useState("");
      const [password, setPassword] = useState("");
      const { setAuthTokens } = useAuth();
      const referer = props.location.state.referer || '/';
  
      function postLogin() {
         console.log('postLogin called.');
         const something = axios.post('http://127.0.0.1:8000/rest-auth/login/', {"username" : userName, "password": password} ).then(
             result =&gt; {
                 console.log('postLogin called. username is ' + userName);
                 if( result.status === 200 ) {
                     setAuthTokens(result.data);
                     setLoggedIn(true);
                     setUserName(userName=&gt; userName);
                 } else {
                     setIsError(true);
                 }
             }).catch(e=&gt;{setIsError(true);}
         );
         console.log('postLogin end. something is :');
         console.log(something);
      } // end postLogin
  
      if (isLoggedIn) {
          console.log('postLogin isLoggedIn is true and referer is ' + referer);
          return &lt;Redirect to={referer} /&gt;;
      }
  
      return (
          &lt;Card&gt;
              &lt;Logo src={logoImg} /&gt;
              &lt;Form&gt;
                  &lt;Input
                      type="username"
                      value={userName}
                      onChange={e=&gt;{
                          setUserName(e.target.value);
                      }}
                      placeholder="username"
                  /&gt;
                  &lt;Input
                      type="password"
                      value={password}
                      onChange={e=&gt;{
                          setPassword(e.target.value);
                      }}
                      placeholder="password"
                  /&gt;
                  &lt;Button onClick={postLogin}&gt;Sign In&lt;/Button&gt;
              &lt;/Form&gt;
              &lt;Link to="/signup"&gt;Don't have an account?&lt;/Link&gt;
              { isError&amp;&amp; &lt;Error&gt;The username or password provider were incorrect.&lt;/Error&gt;}
          &lt;/Card&gt;
      );
  }
  
  export default Login;
  </code></pre>
  
  <p>Admin.js</p>
  
  <pre><code>import React, { useState } from "react";
  import { Button } from "../components/AuthForms"
  import {useAuth} from "../context/auth";
  
  function Admin(props) {
      const  { setAuthTokens } = useAuth();
      const [userName, setUserName] = useState();
      function  logOut () {
          setAuthTokens();
      }
      return (
      &lt;div&gt;
          &lt;div&gt;Admin Page userName is [{props.username}]&lt;/div&gt;
          &lt;div&gt;Admin Page userName is [{userName}]&lt;/div&gt;
          &lt;Button onClick={logOut}&gt;Log out&lt;/Button&gt;
      &lt;/div&gt;);
  }
  
  export default Admin;
  </code></pre>
  
  <p>When I login I do not see the userName. 
  What a I doing wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/BiGvO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BiGvO.png" alt="enter image description here"></a></p>
  
  <p>Update: I also have this file, auth.js</p>
  
  <pre><code>import { createContext, useContext } from 'react';
  
  export const AuthContext = createContext();
  
  export function useAuth() {
      return useContext(AuthContext);
  }
  </code></pre>