此推送(&p；/"；)不会将我重定向到主页 [英] this.props.history.push("/") isn't redirecting me to homepage
本文介绍了此推送(&p；/"；)不会将我重定向到主页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
this.props.history.push('/')没有重定向。我有一个handleSubmit，它应该在我按下登录按钮后运行。我真的不确定发生了什么。按下LOGIN按钮将运行handleSubmit，但它恰好位于this.props.history.push('/')处。如有任何帮助，我们不胜感激。
App.js
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<Provider store={store}>
<Router>
{/* <Navbar /> */}
<div className="container">
<Routes>
<Route exact path="/" element={<Home/>} />
<Route exact path="/loginUser" element={<Login/>} />
<Route exact path="/createUser" element={<Signup/>} />
</Routes>
</div>
</Router>
</Provider>
</MuiThemeProvider>
);
}
}
export default App;
Login.js
class Login extends Component {
constructor(){
super();
this.state = {
email: '',
password: '',
errors: {}
}
}
handleSubmit = (event) => {
event.preventDefault();
const userData = {
email: this.state.email,
password: this.state.password
}
axios
.post("/loginUser", userData)
.then(res => {
console.log(res.data);
localStorage.setItem('FBIdToken', `Bearer ${res.data.token}`);
this.props.history.push('/')
})
.catch((err) => {
console.log("ERROR inside loginUser.js");
})
}
// Combine handleEmailChange and handlePasswordChange
handleEmailChange = (event) => {
this.setState({
email: event.target.value
})
}
handlePasswordChange = (event) => {
this.setState({
password: event.target.value
})
}
render() {
const { classes } = this.props;
return (
<Grid container className={classes.form}>
<Grid item sm/>
<Grid item sm>
<img src={HeroLogo} alt="CompanyLogo" className={classes.logo}/>
<Typography variant="h2" className={classes.pageTitle}>
Login
</Typography>
{/* Do we need to validate the email?? */}
<form noValidate onSubmit={this.handleSubmit}>
<FormControl margin="normal" variant="outlined" sx={{width:'50ch'}}>
<InputLabel htmlFor="email">Email</InputLabel>
<OutlinedInput
id="email"
type="email"
value={this.state.email}
className={classes.textField}
onChange={this.handleEmailChange}
label="Email"
/>
</FormControl>
<br/>
<FormControl margin="normal" variant="outlined" sx={{width:'25ch'}}>
<InputLabel htmlFor="password">Password</InputLabel>
<OutlinedInput
id="password"
type="password"
value={this.state.password}
className={classes.textField}
onChange={this.handlePasswordChange}
label="Password"
/>
</FormControl>
<br/>
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
>
LOGIN
</Button>
<br/>
<small>Don't have an account? <Link to="/createUser">Sign up</Link></small>
</form>
</Grid>
<Grid item sm/>
</Grid>
)
}
}
Package.json
{
"name": "derms-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "https://north*******************************cloudfunctions.net/api"
}
推荐答案
我很惊讶您没有看到任何错误，原因有几个：
react-router-domV6不再公开用于导航的history对象。它被替换为返回navigate函数的useNavigate挂钩。react-router-domV6Route组件也不再传递任何路线道具(，即history、location和match)，它们根本不存在。换句话说，this.props.history是未定义的，在尝试调用push函数时应抛出错误。
由于Login是类组件，您需要创建自己的自定义withRouter组件来获取navigate函数并将其作为道具传递给Login。
const withRouter = Component => props => {
const navigate = useNavigate();
return (
<Component {...props} navigate={navigate} />
);
};
...
class Login extends Component {
constructor(){
super();
this.state = {
email: '',
password: '',
errors: {}
}
}
handleSubmit = (event) => {
event.preventDefault();
const userData = {
email: this.state.email,
password: this.state.password
}
axios
.post("/loginUser", userData)
.then(res => {
console.log(res.data);
localStorage.setItem('FBIdToken', `Bearer ${res.data.token}`);
this.props.navigate('/');
})
.catch((err) => {
console.log("ERROR inside loginUser.js");
})
}
...
render() {
...
return (
...
)
}
}
export default withRouter(Login);
这篇关于此推送(&p；/"；)不会将我重定向到主页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
