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!!
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.