title: Redirect user to a page after succesful login in React app
body: <p>Here is the code for Login.js. Here in the handlelogin function, it verifies if there is a user with the typed credentials and if there is a user with those, it goes to the else condition of then in the function.</p>
  <p>From there I want to redirect the user to the endpoint say /user/profile to show the user his profile.</p>
  <pre><code>import React, { useState } from 'react'
  import Axios from 'axios'
  // import bgg from  './mainbggg.jpg'
  import imgg from './loginbg.jpg'
  import './login.css'
  import { toast, ToastContainer } from 'react-toastify'
  
  import { Route,Navigate } from 'react-router-dom'
  export default function Login(props) {
  
    const [emaillogin, setemaillogin] = useState(&quot;&quot;)
    const [passwordlogin, setpasswordlogin] = useState(&quot;&quot;)
  
    const [LoginStatus, setLoginStatus] = useState(&quot;&quot;)
  
    const handlelogin = (e) =&gt; {
  
      Axios.post('http://localhost:3001/loginuser', {
  
        username: emaillogin,
        password: passwordlogin,
  
      }).then((response) =&gt; {
  
        if (response.data.message) {
          setLoginStatus(response.data.message)
          console.log(&quot;Unsuccessful&quot;)
          // alert('Wrong Credentials')
          toast('Wrong Credentials')
  
  
        } else {
          setLoginStatus(response.data[0].emaillogin)
          console.log(&quot;Successful&quot;)
          // alert('Sucess Registration')
          props.flipauth();
  
          
          
        }
  
      }
      )
  
      e.preventDefault();
  
    }
  
    return (
  
      &lt;&gt;
      &lt;ToastContainer/&gt;
        &lt;div className='maindiv' style={{ height: '700px', backgroundSize: 'cover', backgroundPosition: 'center', width: '100%', backgroundRepeat: 'no-repeat', backgroundImage: `url(${imgg})` }}&gt;
          &lt;div className=&quot;content&quot; style={{ paddingTop: '200px', width: '400px' }}&gt;
            {/* &lt;img src=&quot;https://thumbs.dreamstime.com/b/retro-train-illustration-isolated-white-background-design-element-logo-label-emblem-sign-retro-train-illustration-isolated-114272289.jpg&quot; alt=''/&gt; */}
            &lt;div className=&quot;login-box&quot;&gt;
              &lt;h2&gt;Login&lt;/h2&gt;
              &lt;form&gt;
                &lt;div className=&quot;user-box&quot;&gt;
                  &lt;input type=&quot;text&quot; onChange={e =&gt; setemaillogin(e.target.value)} name=&quot;&quot; required=&quot;&quot; /&gt;
                  &lt;label&gt;Username&lt;/label&gt;
                &lt;/div&gt;
                &lt;div className=&quot;user-box&quot;&gt;
                  &lt;input type=&quot;password&quot; onChange={e =&gt; setpasswordlogin(e.target.value)} name=&quot;&quot; required=&quot;&quot; /&gt;
                  &lt;label&gt;Password&lt;/label&gt;
                &lt;/div&gt;
                
                &lt;button className=&quot;button-9&quot; onClick={handlelogin} &gt;LOGIN&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  
  
        &lt;/div&gt;
  
      &lt;/&gt;
  
    )
  }
  </code></pre>
  <p>App.js</p>
  <pre><code>import Navbar from './components/Navbar';
  import Homegif from './components/Homegif';
  import Userprofile from './components/Userprofile'
  import { Link } from &quot;react-router-dom&quot;;
  import {
    BrowserRouter as Router,
  
    Route, Routes
  } from &quot;react-router-dom&quot;;
  import Signup from './components/Signup';
  import Login from './components/Login';
  import About from './components/About';
  
  // import { toast, ToastContainer } from 'react-toastify';
  import { useState } from 'react';
  import ProtectedRoute from './ProtectedRoute';
  // import 'react-toastify/dist/ReactToastify.css';
  
  
  
  
  
  // toast.configure();
  function App() {
    const [auth, setauth] = useState(0)
  
    const flipauth = () =&gt; {
      setauth(1 - auth)
    }
  
  
    return (
      &lt;&gt;
  
        &lt;Router&gt;
          &lt;Navbar auth={auth} flipauth={flipauth} /&gt;
  
  
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; element={&lt;Homegif /&gt;}&gt;
  
            &lt;/Route&gt;
  
            &lt;Route exact path=&quot;/about&quot; element={&lt;About /&gt;}&gt;
  
            &lt;/Route&gt;
  
  
  
            &lt;Route exact path=&quot;/signup&quot; element={&lt;Signup /&gt;}&gt;
  
            &lt;/Route&gt;
  
            &lt;Route exact path=&quot;/login&quot; element={&lt;Login auth={auth} flipauth={flipauth} /&gt;}&gt;
  
            &lt;/Route&gt;
  
            &lt;Route exact path=&quot;/user/profile&quot; element={&lt;Userprofile path=&quot;/user/profile&quot; component={Userprofile} Auth={auth} /&gt;}&gt;
  
            &lt;/Route&gt;
  
  
          &lt;/Routes&gt;
          {/*      
        path=&quot;/user/profile&quot; component={Userprofile} Auth={auth} */}
  
  
  
        &lt;/Router&gt;
  
      &lt;/&gt;
  
    );
  }
  
  export default App;
  </code></pre>