Как передать данные, используя <redirect> в ответном маршрутизаторе v4?

Ситуация заключается в том, что я использую данные axios усиления данных из axios и я хочу перенаправить с текущей страницы на другую страницу, а также передать некоторые данные.

Как я могу передавать данные, когда я использую <Redirect> для перенаправления?

Я использую код, как показано ниже, и я не могу получить "профиль" на целевой странице. Неважно, this.props или this.state

Я понимаю, что использование response-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>
        )
    }
}

Ответы

Ответ 1

То, как вы передаете свое состояние в Redirect является правильным, единственное место, где должна быть проблема, - это то, как вы обращаетесь к нему. Доступ к состоянию можно получить как this.props.location.state. Однако, если вы прямо направляетесь к path тогда состояние не будет доступно, поэтому вам нужно добавить чек

Получите доступ к своему государству

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