Перенаправить пользователя на страницу после успешного входа в приложение React

Вот код для Login.js. Здесь, в функции handlelogin, он проверяет, есть ли пользователь с введенными учетными данными, и если есть пользователь с ними, он переходит к условию else в функции.

Оттуда я хочу перенаправить пользователя на конечную точку, скажем /user/profile, чтобы показать пользователю его профиль.

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("")
 const [passwordlogin, setpasswordlogin] = useState("")
 const [LoginStatus, setLoginStatus] = useState("")
 const handlelogin = (e) => {
 Axios.post('http://localhost:3001/loginuser', {
 username: emaillogin,
 password: passwordlogin,
 }).then((response) => {
 if (response.data.message) {
 setLoginStatus(response.data.message)
 console.log("Unsuccessful")
 // alert('Wrong Credentials')
 toast('Wrong Credentials')
 } else {
 setLoginStatus(response.data[0].emaillogin)
 console.log("Successful")
 // alert('Sucess Registration')
 props.flipauth();
 
 
 }
 }
 )
 e.preventDefault();
 }
 return (
 <>
 <ToastContainer/>
 <div className='maindiv' style={{ height: '700px', backgroundSize: 'cover', backgroundPosition: 'center', width: '100%', backgroundRepeat: 'no-repeat', backgroundImage: `url(${imgg})` }}>
 <div className="content" style={{ paddingTop: '200px', width: '400px' }}>
 {/* <img src="https://thumbs.dreamstime.com/b/retro-train-illustration-isolated-white-background-design-element-logo-label-emblem-sign-retro-train-illustration-isolated-114272289.jpg" alt=''/> */}
 <div className="login-box">
 <h2>Login</h2>
 <form>
 <div className="user-box">
 <input type="text" onChange={e => setemaillogin(e.target.value)} name="" required="" />
 <label>Username</label>
 </div>
 <div className="user-box">
 <input type="password" onChange={e => setpasswordlogin(e.target.value)} name="" required="" />
 <label>Password</label>
 </div>
 
 <button className="button-9" onClick={handlelogin} >LOGIN</button>
 </form>
 </div>
 </div>
 </div>
 </>
 )
}

App.js

import Navbar from './components/Navbar';
import Homegif from './components/Homegif';
import Userprofile from './components/Userprofile'
import { Link } from "react-router-dom";
import {
 BrowserRouter as Router,
 Route, Routes
} from "react-router-dom";
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 = () => {
 setauth(1 - auth)
 }
 return (
 <>
 <Router>
 <Navbar auth={auth} flipauth={flipauth} />
 <Routes>
 <Route exact path="/" element={<Homegif />}>
 </Route>
 <Route exact path="/about" element={<About />}>
 </Route>
 <Route exact path="/signup" element={<Signup />}>
 </Route>
 <Route exact path="/login" element={<Login auth={auth} flipauth={flipauth} />}>
 </Route>
 <Route exact path="/user/profile" element={<Userprofile path="/user/profile" component={Userprofile} Auth={auth} />}>
 </Route>
 </Routes>
 {/* 
 path="/user/profile" component={Userprofile} Auth={auth} */}
 </Router>
 </>
 );
}
export default App;

Решение проблемы

Вы можете использовать useNavigatefrom react-router-dom. Я также рекомендую вам изменить тип кнопки на submitи изменить onClickна onSubmitв форме:

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,
 useNavigate
} from 'react-router-dom'
export default function Login(props) {
 const [emaillogin, setemaillogin] = useState("")
 const [passwordlogin, setpasswordlogin] = useState("")
 const [LoginStatus, setLoginStatus] = useState("")
 const navigate = useNavigate()
 const handlelogin = (e) => {
 e.preventDefault();
 Axios.post('http://localhost:3001/loginuser', {
 username: emaillogin,
 password: passwordlogin,
 }).then((response) => {
 if (response.data.message) {
 setLoginStatus(response.data.message)
 console.log("Unsuccessful")
 // alert('Wrong Credentials')
 toast('Wrong Credentials')
 } else {
 setLoginStatus(response.data[0].emaillogin)
 console.log("Successful")
 // alert('Sucess Registration')
 props.flipauth();
 useNavigate('/user/profile')
 }
 }
 )
 }
 return (
 <>
 <ToastContainer / >
 <div className = 'maindiv'
 style = {
 {
 height: '700px',
 backgroundSize: 'cover',
 backgroundPosition: 'center',
 width: '100%',
 backgroundRepeat: 'no-repeat',
 backgroundImage: `url(${imgg})`
 }
 } >
 <div className = "content"
 style = {
 {
 paddingTop: '200px',
 width: '400px'
 }
 } > { /* <img src="https://thumbs.dreamstime.com/b/retro-train-illustration-isolated-white-background-design-element-logo-label-emblem-sign-retro-train-illustration-isolated-114272289.jpg" alt=''/> */ }
 <div className = "login-box" >
 <h2> Login < /h2>
 <form onSubmit={handleLogin}>
 <div className = "user-box" >
 <input type = "text"
 onChange = {
 e => setemaillogin(e.target.value)
 }
 name = ""
 required = "" / >
 <label> Username</label>
 </div >
 <div className = "user-box" >
 <input type = "password"
 onChange = {
 e => setpasswordlogin(e.target.value)
 }
 name = ""
 required = "" / >
 <label> Password </label>
 </div >
 <button className = "button-9" type='submit'> LOGIN < /button>
 </form>
 </div>
 </div>
 </div>
 </>
 )
 }