当我在同一路由中传递回调函数时 this.props.history.push() 不起作用

Question

I have

<Route path='/login' exact render={() => <LoginPage sectionEmailHandler={this.sectionEmailHandler} />} /> 

this Route with path /login ,and i am passing callback function

sectionEmailHandler 

and inside login component i am doing

this.props.history.push('/dashboard/session')

so now i am ,getting the error that

TypeError: Cannot read property 'push' of undefined

but when i did not pass the callback function with /login route like this

<Route path='/login' exact component={LoginPage} /> 

then it works fine.

Below is my code

Pages/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;

LoginPage.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

Answer 1

Pass the route props from the Route on to the rendered component.

<Route
  path='/login'
  exact
  render={(routeProps) => ( // <-- { history, location, match }
    <LoginPage
     sectionEmailHandler={this.sectionEmailHandler}
     {...routeProps} // <-- spread in to component
    />
  )}
/>

Answer 2

I assume you are using react router .

In your example

<Route path='/login' exact render={() => <LoginPage sectionEmailHandler={this.sectionEmailHandler} />} />

You need to pass in the props like this.

<Route path='/login' exact render={(props) => <LoginPage sectionEmailHandler={this.sectionEmailHandler} {...props} />} />

The props contains match, location, history

The children render prop receives all the same route props as the component and render methods, except when a route fails to match the URL, then match is null.