title: Once login is successful, how to navigate and display nav links
body: <p>When login is successful, I would like to display the following Navigation Links based on following privileges. 
  Display <code>Profile</code> nav link based on res.data.loginData[0].privilege === <code>"PLAYER"</code>. Display <code>Profile, Register</code> nav link if res.data.loginData[0].privilege === <code>"ADMIN"</code>.</p>
  
  <p>Without login, when a user access the site, we should be displaying <code>Home, Login and Aboutus</code> pages only.</p>
  
  <p>Being a beginner in this space, I am not sure if it implemented like this, please advise. 
  <a href="https://i.stack.imgur.com/dRQBR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dRQBR.png" alt="enter image description here"></a></p>
  
  <p><code>Login.js</code></p>
  
  <pre><code>const handleSubmit = (e) =&gt; {
      e.preventDefault()
      const fetchData = async () =&gt; {
        try {
          const res = await Axios.post('http://localhost:8000/service/login', { email , password });
          setLoginData(res.data.loginData); 
            if (email === res.data.loginData[0].email &amp;&amp; password === res.data.loginData[0].password) {
              setError(false);
              setHelperText('Login Successfully !');
              if(res.data.loginData[0].privilege === "PLAYER"){
  
              }
          } else {
              setError(true);
              setHelperText('Incorrect Email or Password..!')
            }
        } catch (e) {
          console.log(e);
        }
      }
      fetchData();
    };
  </code></pre>
  
  <p><code>Navigation.js</code> </p>
  
  <pre><code>const Navigation = () =&gt; {
      return (
          &lt;div className="App"&gt;
              &lt;div className="wrapper"&gt;
                  &lt;nav className="siteNavigation_nav_links"&gt;
                      &lt;NavLink className="mobile_register_link" to="/"&gt;Home&lt;/NavLink&gt;
                      &lt;NavLink className="mobile_register_link" to="/profile"&gt;Profile&lt;/NavLink&gt;
                      &lt;NavLink className="mobile_register_link" to="/register"&gt;Register&lt;/NavLink&gt;
                      &lt;NavLink className="mobile_login_link" to="/login"&gt;Login&lt;/NavLink&gt;
                      &lt;NavLink className="mobile_login_link" to="/aboutus"&gt;About us&lt;/NavLink&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Navigation;
  </code></pre>
  
  <p><code>App.js</code></p>
  
  <pre><code>var ReactDOM = require('react-dom');
  const App = () =&gt; ( &lt;BrowserRouter&gt;
    &lt;&gt;
      &lt;Navigation /&gt;
      &lt;Switch&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route path="/profile" component={Profile} /&gt;
        &lt;Route path="/register" component={Register} /&gt;
        &lt;Route path="/login" component={Login} /&gt;
        &lt;Route path="/aboutus" component={Aboutus} /&gt;
      &lt;/Switch&gt;
    &lt;/&gt;
  &lt;/BrowserRouter&gt;)
  ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
  
  export default App;
  </code></pre>