[英]this.props.history don't redirect
I don't know where I'm going wrong by clicking the enter button I validate my user and use this.props.history.push ("/ home");我不知道我哪里出错了,通过单击输入按钮验证我的用户并使用 this.props.history.push ("/ home"); and it doesn't work
它不起作用
my login .我的登录。 js
js
class LoginForm extends Component {
constructor(props){
super(props);
this.state = {
login:'',
password:'',
};
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
async onSubmit(e){
e.preventDefault();
const {login, password } = this.state;
const response = await api.post('/login', { login,password });
const user = response.data.user.login;
const {jwt} = response.data;
localStorage.setItem('token', jwt);
localStorage.setItem('user', user);
this.props.history.push("/home");
}
onChange(e){
this.setState({[e.target.name]: e.target.value});
}
render() {
const { errors, login, password, isLoading } = this.state;
return (
<form onSubmit={this.onSubmit}>
<label htmlFor="login">Login</label>
<input type="text" name="login" id="login" value={login} onChange={(e) => this.onChange(e)} placeholder="Informe seu login" />
<label htmlFor="password">Senha</label>
<input type="password" name="password" id="password" value={password} onChange={(e) => this.onChange(e)} placeholder="Informe sua senha"/>
<button className="btnEnt" type="submit">Entrar</button>
</form>
)
}
}
export default LoginForm;
my router .我的路由器。 js:
js:
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Login from './pages/login/index';
import DashBoard from './pages/dashboard/index';
import PrivateRoute from './auth';
export default function Routes(){
console.log('a')
return(
<BrowserRouter>
<Switch>
<PrivateRoute path="/home" component = {DashBoard}/>
</Switch>
</BrowserRouter>
);
} <PrivateRoute path="/home" component = {DashBoard}/>
</Switch>
</BrowserRouter>
);
}
my auth .我的身份。 js :
js:
import { Route, Redirect} from 'react-router-dom';
const isAuth = () => {
console.log('a');
if(localStorage.getItem('token') !== null) {
return true;
}
return false;
};
const PrivateRoute = ({component: Component, ...rest}) => {
return (
<Route
{...rest}
render={props =>
isAuth() ? (
<Component {...props} />
): (
<Redirect
to={{
pathname: '/',
state: {message: 'Usuário não autorizado'}
}}
/>
)}
/>
);
}
export default PrivateRoute;
my dashboard / index我的仪表板/索引
import React, { Component } from 'react'; import React, { Component } from 'react'; import Home from '../../components/Home';
从'../../components/Home'导入Home;
class DashBoard extends Component {
render() {
return (
<Home />
)
}
}
export default DashBoard;
error:错误:
Unhandled Rejection (TypeError): Cannot read property 'push' of undefined Uncaught (in promise) TypeError: Cannot read property 'push' of undefined I really do not know what I can is wrong is not redirecting, I have tried all possible alternatives.
未处理的拒绝(类型错误):无法读取未定义未捕获的属性“推送”(承诺中)类型错误:无法读取未定义的属性“推送”我真的不知道我能错的是不是不重定向,我已经尝试了所有可能的替代方法。
Before you can use history in your React component, you need to wrap it in withRouter.在 React 组件中使用历史记录之前,您需要将它包装在 withRouter 中。
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md
import history from 'add your path'
export default function Routes() {
console.log('a')
return (
<BrowserRouter history={history}>
<Switch>
<PrivateRoute exact path="/home" component={DashBoard} />
</Switch>
</BrowserRouter>
)
}
do changes in router file更改路由器文件
import { withRouter } from 'react-router-dom';
export default withRouter(LoginForm);
add withRouter in this component在这个组件中添加 withRouter
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.