當我在同一路由中傳遞回調函數時 this.props.history.push() 不起作用

Question

我有

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

這條帶有路徑/登錄名的路由，我正在傳遞回調函數

sectionEmailHandler 

在我正在做的登錄組件中

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

所以現在我得到了錯誤

類型錯誤：無法讀取未定義的屬性“推送”

但是當我沒有像這樣使用 /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

Answer 1

將路由道具從Route傳遞到渲染組件。

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

Answer 2

我假設您正在使用react router 。

在你的例子中

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

你需要像這樣傳遞道具。

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

道具包含比賽、地點、歷史

子渲染道具接收與組件和渲染方法相同的所有路由道具，除非路由無法匹配 URL，則 match 為空。