reactjs - 路由器和私有路由器/历史的问题
问题描述
您好,我在重定向到在私有路由器上进行验证的页面时遇到问题
未处理的拒绝(TypeError):无法读取未定义的属性“推送”
在这条线上:
this.props.history.push("/home");
我的组件:
import React, { Component } from 'react';
import api from '../services/api';
import { withRouter } from 'react-router';
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 withRouter (LoginForm);
我的路由器:
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(){
return(
<BrowserRouter>
<div>
<Switch>
<Route path="/" exact component = {Login}/>
<PrivateRoute path="/home" component = {DashBoard}/>
</Switch>
</div>
</BrowserRouter>
);
}
我的私人路由或身份验证路由器:
import React from 'react';
import { Route, Redirect} from 'react-router-dom';
const isAuth = () => {
console.log('a');
if(localStorage.getItem('token') !== null) {
console.log('true')
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;
我基本上有我的路由器,我还检查是否允许用户进入这个页面,但我无法让它工作。
解决方案
好吧,我阅读了您的代码,这是我的答案
你只需要从而不是从withRouter
进口; )react-router-dom
react-router
import { withRouter } from "react-router-dom";
并像使用它一样
export default withRouter(LoginForm);
推荐阅读
- c# - 如何使用 Microsoft.Graph C# API 请求增量
- python - 类型错误:无法将 datetime.datetime 与 datetime.date 进行比较
- mysql - 如何处理 BIG(16GB + 或 100M+ 行)文件并导入 MySQL 数据库
- reactjs - Reactjs JSX 在 GKE 下无法渲染
- kotlin - Kotlin:String 类型的 ArrayList:应用程序在通过赋值初始化元素时崩溃
- javascript - ASP.NET - 未捕获的 SyntaxError:无法在模块外使用 import 语句
- java - 什么语义/语法规则决定何时用“then”开始 CompletableFuture 方法名称?
- ios - 如何添加搜索用户功能?
- selenium-webdriver - 如何为 IMAPFolder.idle 设置超时
- python - 删除python字符串中数字1之前的数字