为什么我的页面在React成功注册后没有重定向到登录页面?

Question

这里，props.history.push("/login");不工作其他一切都在运转有人能帮忙吗?

import React, { useState } from 'react'
import { Link } from "react-router-dom";
import axios from "axios";

const Register = (props) => {
const [data, setData] = useState({
name: "",
email: "",
password: ""
})
const { name, email, password } = data;
const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
await axios.post(
"/auth/register", { name, email, password }, {
headers: {
"Content-Type": "application/json",
},
}
);
props.history.push("/login");
} catch (err) {
console.log(err);
}
};
return (
<form>
<h3>Create an account</h3>
<div className="mb-3">
<label>Name</label>
<input
type="text"
className="form-control"
placeholder="First name"
name="name"
value={name}
onChange={handleChange}
/>
</div>
<div className="mb-3">
<label>Email</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
name="email"
value={email}
onChange={handleChange}
/>
</div>
<div className="mb-3">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter Password"
name="password"
value={password}
onChange={handleChange}
/>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>
Register
</button>
</div>
<p className="forgot-password text-right">
Already registered? <Link to="/login">Login</Link>
</p>
</form>
);
}
export default Register

Answer 1

你必须尝试使用这个

import { useHistory } from "react-router-dom";

功能组件

let history = useHistory();

注册成功后

history.push("/login");

Answer 2

现在可以运行了

import React, { useState } from 'react'
import { Link } from "react-router-dom";
import axios from "axios";
import { useNavigate } from 'react-router-dom';


const Register = (props) => {

const [data, setData] = useState({
name: "",
email: "",
password: ""
})
const { name, email, password } = data;
const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};
let navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();

try {
await axios.post(
"/auth/register", { name, email, password }, {
headers: {
"Content-Type": "application/json",
},
}
);

navigate("/login");
} catch (err) {
console.log(err);
}
};
return (
<form>
<h3>Create an account</h3>
<div className="mb-3">
<label>Name</label>
<input
type="text"
className="form-control"
placeholder="First name"
name="name"
value={name}
onChange={handleChange}
/>
</div>
<div className="mb-3">
<label>Email</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
name="email"
value={email}
onChange={handleChange}
/>
</div>
<div className="mb-3">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter Password"
name="password"
value={password}
onChange={handleChange}
/>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>
Register
</button>
</div>
<p className="forgot-password text-right">
Already registered? <Link to="/login">Login</Link>
</p>
</form>
);
}
export default Register