我在react中创建了一个基本的日志页面,在登录时它会将我重定向到下一个组件,我使用react-router v5.3,它显示错误无法读取未定义的属性(阅读'push')我如何解决此错误
import React, {useState} from 'react'
import {useHistory,} from 'react-router-dom';
export default function Loginpage() {
const history = useHistory();
//set the initial sate for the inputs
const [username, setusername] = useState('');
const [password, setpassword] = useState('');
//function to handle form submission
const handleFormSubmit = (event) => {
event.preventDefault();// prevent from refreshing the page
//checck the user name and password
if (username === 'employee' && password === 'emp123'){
history.push('./components/JobFindPage');
alert('hii');
}
else if (username === 'employer' && password === 'emr123'){
history.push('/CreateJobPage');
alert('hii');
}
else{
alert ('wrong username or password')
}
}
return (
<>
<form onSubmit = {handleFormSubmit}>
<label>
Username :
<input type="text" value={username} onChange={(e) => setusername(e.target.value)} /> <br />
</label>
<label>
Password :
<input type="text" value={password} onChange={(e) => setpassword(e.target.value)} /> <br />
</label>
<button type="submit">Log IN</button>
</form>
</>
);
}
我希望使用历史推送(/component)将我重定向到该组件
1条答案
按热度按时间fnx2tebb1#
该应用程序缺少渲染路由器以提供路由上下文和
history
对象。导入路由器并 Package
App
组件。示例:
由于您正在使用
react@18
并将应用渲染到React.StrictMode
组件中,因此您还需要至少***转换到***react-router-dom@5.3.3
以解析compatibility issue between React 18 and RRDv5。Login
组件还应导航到应用正在呈现路由的路径。history.push("./components/JobFindPage");
将错误地将"/components/JobFindPage"
附加到当前URL路径的末尾。