javascript - 当我在同一路由中传递回调函数时,this.props.history.push() 不起作用
问题描述
我有
<Route path='/login' exact render={() => <LoginPage sectionEmailHandler={this.sectionEmailHandler} />} />
这条带有路径 /login 的路线,我正在传递回调函数
sectionEmailHandler
在我正在做的登录组件内部
this.props.history.push('/dashboard/session')
所以现在我得到了错误
TypeError:无法读取未定义的属性“推送”
但是当我没有像这样使用 /login 路由传递回调函数时
<Route path='/login' exact component={LoginPage} />
然后它工作正常。
下面是我的代码
页面/index.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import LoginPage from '../components/Login/LoginPage'
import StartPage from '../components/startPage/StartHere'
import users from '../pages/users/index'
class Home extends Component {
// constructor(props){
// super(props)
// this.state={
// email:''
// }
// }
sectionEmailHandler=(email)=>{
console.log(email)
}
render() {
return (
<>
<Router >
<Switch>
<Route path='/' exact component={StartPage} />
<Route path='/login' exact render={() => <LoginPage sectionEmailHandler={this.sectionEmailHandler} />} />
<Route path='/dashboard/session' exact component={users} />
</Switch>
</Router>
</>
)
}
}
export default Home;
登录页面.js
import React, { Component } from 'react'
import { Redirect } from 'react-router-dom';
import { Button,Label } from 'reactstrap';
import {Mutation, Query} from 'react-apollo';
import gql from 'graphql-tag'
import LoginPage_logo_img from '../../Assets/LoginPage_logo_img.png'
import LoginPage_email_icon from '../../Assets/LoginPage_email_icon.svg'
import LoginPage_lock_icon from '../../Assets/LoginPage_lock_icon.svg'
import './LoginPage.css'
const AUTH_USER = gql`
mutation TokenAuth($username: String!,$password : String!) {
tokenAuth(username: $username,password : $password) {
token,
payload,
refreshExpiresIn
}
}
`;
class LoginPage extends Component {
constructor(props){
super(props)
this.state={
fields: {},
errors: {},
email:'',
password:''
}
this.textInputemail = React.createRef();
this.textInputpassword = React.createRef();
}
handleValidation(){
let fields = this.state.fields;
let errors = {};
let formIsValid = true;
//Email
if(!fields["email"]){
formIsValid = false;
errors["email"] = "Please complete the field above";
}
if(typeof fields["email"] !== "undefined"){
let lastAtPos = fields["email"].lastIndexOf('@');
let lastDotPos = fields["email"].lastIndexOf('.');
if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
formIsValid = false;
errors["email"] = "Please enter the valid Email";
}
}
this.setState({errors: errors});
return formIsValid;
}
handleChnage=()=>{
let fields = this.state.fields;
fields[this.textInputpassword.current.name] = this.textInputpassword.current.value;
fields[this.textInputemail.current.name] = this.textInputemail.current.value;
this.setState({fields});
}
render() {
return (
<Mutation mutation={AUTH_USER}>
{(authUser,{data})=>(
<div className="LoginPage-container">
<div className="LoginPage-wrapper">
<img src={LoginPage_logo_img} alt="" className="LoginPage-logo"/>
<div className="LoginPage-email">
<img src={LoginPage_email_icon} alt=""/>
<input ref={this.textInputemail} type="email" name="email" onChange={this.handleChnage}/>
</div>
<div className="LoginPage-password">
<img src={LoginPage_lock_icon} alt=""/>
<input ref={this.textInputpassword} type="password" name="password" placeholder="Password" onChange={this.handleChnage}/>
</div>
<Button className="LoginPage-signIn" onClick={(e)=>{
e.preventDefault()
const {email,password}= this.state.fields;
authUser({
variables:{
username:email,
password:password
}
}).then((res)=>{
let token=res.data.tokenAuth.token;
localStorage.setItem('WonEToken', token);
this.props.sectionEmailHandler(email)
console.log(this.props)
this.props.router.push('/dashboard/session');
}).catch((err)=>{
console.log(err+'Error while fetching the user details');
})
}}>Sign In</Button>
<h2></h2>
</div>
</div>
)}
</Mutation>
)
}
}
export default LoginPage
解决方案
将路由道具从Route
on 传递到渲染组件。
<Route
path='/login'
exact
render={(routeProps) => ( // <-- { history, location, match }
<LoginPage
sectionEmailHandler={this.sectionEmailHandler}
{...routeProps} // <-- spread in to component
/>
)}
/>
推荐阅读
- algorithm - 如果数据不适合物理 RAM 内存,最快排序?
- node.js - 从 github 下载的 Angular 项目的 npm 安装错误
- r - 每行添加具有中值绝对偏差 (MAD) 的列
- nginx - Nginx nchan pubsub 避免回显消息
- matlab - 在 Matlab 中使用中心切片定理实现滤波反投影算法
- java - 尝试执行 POST 时方法不允许 REST Java
- reactjs - 如何从 React 应用程序的安全实例访问 API
- javascript - 如何在物化CSS中添加边距?
- paypal - 勾选在 PayPal 捐赠表格上将此设为每月捐赠默认情况下
- pointers - Rust - 包装 FFI 指针