反應路由器 dom v5 history.push 不呈現新頁面

Question

我需要在登錄后將用戶重定向到他們的個人資料頁面，然后嘗試在 Axios 中使用 history.push()。 這是我的登錄表單代碼。 我使用 onClick 按鈕獲取 email 和用戶密碼，然后將它們重定向到新頁面 ClientProfile：

登錄.js

import React from 'react';
import {Form, Button} from 'react-bootstrap';
import { useState } from 'react';
import Axios from 'axios';
import { useHistory } from 'react-router-dom';

function SignIn() {

    const history = useHistory();

  const [userEmail, setEmail] = useState("");
  const [userPassword, setPassword] = useState("");

//after onClick
  const signIn = () => {

//get user input
    Axios.post("http://localhost:8800/signIn", {
      userEmail: userEmail,
      userPassword: userPassword,
    }).then((res) => {
        console.log(res);
        history.push('/clientprofile');
  })};

    return (
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control type="email" placeholder="Enter your email here"  
                        onChange = {(event) => {
                          setEmail(event.target.value);
                        }}
                      />
            </Form.Group>

            <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" placeholder="Enter your password here" 
                    onChange = {(event) => {
                      setPassword(event.target.value);
                    }}
                    />
            </Form.Group>
            
            <Button variant="primary" type="submit" onClick={ signIn }>
                Submit
            </Button>
        </Form>
    )
}

export default SignIn;

我在這里定義app.js中的路由：

import './App.css';
import { Navbar, Nav, Container, Image } from 'react-bootstrap';
import About from './Components/About';
import Services from './Components/Services';
import Help from './Components/Help';
import SignIn from './Components/SignIn';
import ClientProfile from './Components/ClientProfile';
import { Switch, Route, NavLink } from 'react-router-dom';

function App() {


  return (
    <div className="App">
      <Navbar className="mainNav">
                <Container>
                        <Nav className="right-side me-auto">
                            <Nav.Link as = {NavLink} to = '/' className="text-white p-3">About Us</Nav.Link>
                            <Nav.Link as = {NavLink} to = '/ourservices' className="text-white p-3">Our Services</Nav.Link>
                            <Nav.Link as = {NavLink} to = '/help' className="text-white p-3">Help</Nav.Link>
                            <Nav.Link as = {NavLink} to = '/signin' className="rounded-pill m-1 px-3 py-2 text-white signInBtn">Sign In</Nav.Link>
                        </Nav>
                </Container>
      </Navbar>
      <br/>
      
      <Switch>
        <Route exact path = "/"><About /></Route>
        <Route path = "/ourservices" ><Services /></Route>
        <Route path = "/help" ><Help /></Route>
        <Route path = "/signin"><SignIn /></Route>

//the route is being defined here
        <Route path = "/clientprofile"><ClientProfile/></Route>
      </Switch>
    </div>
  );
}

export default App;

但是，它不會呈現新頁面，而是停留在同一頁面上，即登錄頁面。 誰能幫我？

Answer 1

const signIn = () => {

//get user input
    Axios.post("http://localhost:8800/signIn", {
      userEmail: userEmail,
      userPassword: userPassword,
    }).then((res) => {
        console.log(res);
        setIsRedirect(true)

//redirect user
        if(isRedirect){
          history.push('/clientprofile');
        }
  })};

在這里，在.then處理程序中，您正在更新 state，並在其下方檢查更新的 state。

但是 React 會異步更新 state。 所以更新的 state 將不會在此處提供。

相反，您可以使用、 useEffect掛鈎並偵聽對isRedirect state 的更新，並在此基礎上執行您的操作。

useEffect(()=>{

if(isRedirect){
    history.push('/clientprofile');
}

},[isRedirect,history])

Answer 2

• 對於react router dom小於6.^

您可以像代碼顯示一樣使用useHistory()鈎子

• 對於最新版本的react router dom大於6.^

你可以像這樣使用useNavigate()鈎子。

import { useNavigate } from 'react-router-dom';

const signIn = () => {
  ....

  let navigate = useNavigate();

         .....
         ......

      navigate('/clientprofile');
    
    .....

  }

因此，請檢查 package.json 文件中的 react-router-dom 版本並進行相應操作。

Answer 3

問題

您正在提交表單，但並未阻止默認表單操作的發生。 這會在處理 POST 請求響應和重定向 UI 之前重新加載頁面。

解決方案

將onClick={signIn}移動到Form組件並將其切換到onSubmit處理程序，並在signin處理程序中使用onSubmit事件 object 並阻止默認的表單操作。

function SignIn() {
  const history = useHistory();

  const [userEmail, setEmail] = useState("");
  const [userPassword, setPassword] = useState("");

  //after onClick
  const signIn = (e) => { // <-- onSubmit event object
    e.preventDefault();   // <-- preventDefault
    // get user input
    Axios.post("http://localhost:8800/signIn", {
      userEmail: userEmail,
      userPassword: userPassword
    }).then((res) => {
      console.log(res);
      history.push("/clientprofile");
    });
  };

  return (
    <Form onSubmit={signIn}> // <-- onSubmit event handler
      ...

      <Button variant="primary" type="submit"> // <-- remove onClick handler
        Submit
      </Button>
    </Form>
  );
}