如何在反应路由器 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