如何修复 reactjs 中的历史推送？

Question

i tried to put the history push in my login that after logging in, the page redirects it to another page, in my login it works but i tried to insert it also in the sign in page but unfortunately it does not redirect anything:

Sign in page: (with axios)

import React, {useState, useEffect} from 'react'
import Axios from 'axios'
import './Register.css'
import styled from 'styled-components'
import Navbar from '../../Components/Navbar/Navbar'
import {useHistory} from 'react-router-dom'

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

const [emailReg, setEmailReg] = useState("");
const [usernameReg, setUsernameReg] = useState("");
const [passwordReg, setPasswordReg] = useState("");
const [repeatpasswordReg, setRepeatPasswordReg] = useState("");
const [natReg, setNatReg] = useState("");
const [setregStatus, setRegStatus] = useState("");


Axios.defaults.withCredentials = true;

const register = () => {
  Axios.post("http://localhost:3001/register", {
    email: emailReg,
    username: usernameReg,
    password: passwordReg,
    nationality: natReg,
  }).then((response) => {
    history.push('/Login');
    console.log(response);
  })
  };
  return (
    <>
    <Navbar/>
     <Container>
      <div className="login-box1">
        <h1>Sign Up</h1>
            <div className="textbox1">
            <i class="fal fa-envelope"></i>
            <input type="text" placeholder="Email" onChange={(e) => {
        setEmailReg(e.target.value);
      }}/>
            </div>

            <div className="textbox1">
            <i class="fas fa-user-alien"></i>
            <input type="text" placeholder="Username" onChange={(e) => {
           setUsernameReg(e.target.value);
          }}/>
            </div>

            <div className="textbox1">
            <i class="fas fa-globe-americas"></i>
            <input type="text" placeholder="Nationality" onChange={(e) => {
          setNatReg(e.target.value);
          }}/>
            </div>

            <div className="textbox1">
            <i className="fas fa-lock"></i>
            <input type="password" placeholder="Password" onChange={(e) => {
          setPasswordReg(e.target.value);
         }} />
            </div>
            
            <div className="textbox1">
            <i className="fas fa-lock"></i>
            <input type="password" placeholder="Re-peat password" onChange={(e) => {
          setRepeatPasswordReg(e.target.value);
          }} />
            </div>
         <input type="button" class="btn11" value="Sign Up" onClick={register}/>
         </div>
         </Container>
        </>
        )}
         export default Register

as u can see, i defined the const history push and then i called it into the axios const, but unfortunatly it does not work, i could i fix that? thanks!!

Answer 1

Possible solutions

• Use withRouter to involve the components

• Create a browser history and access as a props

  <Router history={history}> {/*...Routes */} </Router

• Check if the routes have an exact property correctly