如何在反應路由器v4中使用<Redirect>傳遞數據？

Question

這種情況是我使用axios從後端獲取數據，我想從當前頁面重定向到另一頁面以及傳遞一些數據。

當我使用<Redirect>重定向時，如何傳遞數據？

我正在使用類似下面的代碼，並且我無法在目標頁面上獲取'個人資料'。無論如何，this.props或this.state

我知道使用react-router-redux是一個更好的選擇。

import React, { Component } from 'react' 
import axios from 'axios' 
import { Redirect } from 'react-router' 

export default class Login extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
      email: '', 
      emailError: 'Please fill in email', 
      password: '', 
      passwordError: 'Please fill in password', 
      redirect: false, 
      profile: '' 
     } 

     this.handleEmail = (e) => { 
      var email = e.target.value 
      var emailError = '' 

      if (email === null) 
       emailError = 'Please fill in email' 

      this.setState({ 
       email: email, 
       emailError: emailError 
      }) 
     } 

     this.handlePassword = (e) => { 
      var password = e.target.value 
      var passwordError = '' 

      if (password === null) 
       passwordError = 'Please fill in password' 

      this.setState({ 
       password: password, 
       passwordError: passwordError 
      }) 
     } 

     this.handleSubmit = (e) => { 
      e.preventDefault() 

      if (this.state.emailError) 
       alert(this.state.emailError) 
      else if (this.state.passwordError) 
       alert(this.state.passwordError) 
      else { 
       axios.post('/user/login', { 
        email: this.state.email, 
        password: this.state.password 
       }).then(response => { 
        if (response.data !== 'fail') { 
         this.setState({ 
          redirect: true, 
          profile: response.data 
         }) 
        } 
       }) 
      } 
     } 
    } 

    render() { 
     const { redirect, profile } = this.state 

     if (redirect) 
      return (<Redirect to={{ 
       pathname: '/user/profile', 
       state: { referrer: this.state.profile } 
      }} />) 

     return (
      <div className="content user"> 
       <div className="container"> 
        <div className="row"> 
         <div className="col-xs-12"> 
          <h1>Log In Your Tutor Profile</h1> 
          <form role="form" noValidate> 
           <div className="row"> 
            <div className="col-xs-12"> 
             <label htmlFor="email">Email</label> 
             <div className="form-group"> 
              <input id="email" type="text" className="form-control" value={this.state.email} onChange={this.handleEmail} name="email" required/> 
             </div> 
            </div> 
           </div> 
           <div className="row"> 
            <div className="col-xs-12"> 
             <label htmlFor="password">Password</label> 
             <div className="form-group"> 
              <input id="password" type="password" className="form-control" value={this.state.password} onChange={this.handlePassword} name="password" required/> 
             </div> 
            </div> 
           </div> 
           <div className="row"> 
            <div className="col-xs-12"> 
             <div className="form-group"> 
              <button className="btn btn-primary submit" onClick={this.handleSubmit}>LOG IN YOUR PROFILE</button> 
             </div> 
            </div> 
           </div> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 1

你是通過你的狀態到Redirect的方式是正確的，只是問題應該是地方是你如何訪問它。狀態可以像this.props.location.state那樣訪問。但是，如果你到path直接路線，然後國家將不是我們可用，因此您需要添加一個檢查

訪問你的狀態好像

this.props.location.state && this.props.location.state.referrer