在React应用程序中成功登录后将用户重定向到页面

Question

这是Login.js的代码。这里，在handlelogin函数中，它验证是否有具有类型化凭据的用户，如果有带有这些凭据的用户，则会进入函数中的其他条件。

从这里，我希望将用户重定向到端点，例如/ 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;

Answer 1

您还可以使用useNavigate from react-router-dom .I，还建议您将按钮类型更改为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>
      </>

    )
  }

​