反应路由器 dom v5 history.push 不呈现新页面

Question

我需要在登录后将用户重定向到他们的个人资料页面，然后尝试在 Axios 中使用 history.push()。这是我的登录表单代码。我使用onClick按钮获取用户的电子邮件和密码，然后将它们重定向到新页面ClientProfile：

SignIn.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

问题

您正在提交表单，但并未阻止默认表单操作的发生。这会在处理 POST 请求响应和重定向 UI 之前重新加载页面。

解决方案

将onClick={signIn} 移动到Form 组件并将其切换到onSubmit 处理程序，并在signin 处理程序中使用onSubmit 事件对象并阻止默认表单操作。

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>
  );
}

Answer 2

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 处理程序中，您正在更新状态，并在其下方检查更新的状态。

但是 React 会异步更新状态。所以更新后的状态不会在这里可用。

相反，您可以使用 useEffect 挂钩并监听 isRedirect 状态的更新，并在此基础上执行您的操作。

useEffect(()=>{

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

},[isRedirect,history])

Answer 3

• 对于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 版本并进行相应操作。