路由器和私人路由器/历史记录的问题

Question

您好，我在重定向到在专用路由器上进行验证的页面时遇到问题

未处理的拒绝(类型错误(：无法读取属性"push" 定义

在这一行上：

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;

我基本上有我的路由器，我还检查是否允许用户进入此页面，但我在使其工作时遇到了麻烦。

Answer 1

好吧，我阅读了您的代码，这是我的答案

您只需要从react-router-dom导入withRouter，而不是从react-router;)

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

并像使用它一样使用

export default withRouter(LoginForm);