React router v4 - 如何访问通过重定向传递的状态? [英] React router v4 - How do you access the state that is passed via Redirect?

问题描述

我在 react 的帮助下制作了一个登录页面，当登录成功时，它会重定向到另一个页面.让我将登录成功时呈现的组件称为A".我想将从数据库中获取的数据传递给组件 A，我这样做是通过将它传递到重定向"组件的状态"属性中.但是，我不明白如何在最终呈现组件 A 的路由"组件中访问此状态.谁能告诉我如何?

I am making a login page with the help of react that redirects to another page when the login is successful. Let me call the component that gets rendered when the login is successful 'A'. I want to pass data fetched from the database to component A and I am doing so by passing it in the 'state' attribute of the 'Redirect' component. However, I do not understand how to access this state in the 'Route' component that ultimately renders component A. Can anyone tell me how?

我的代码如下:

登录.js:

import React from 'react'
import Center from 'react-center'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import isEmpty from 'lodash/isEmpty'
import { browserHistory } from 'react-router'
import { Route, Redirect } from 'react-router-dom'

import Courses from '../pages/Courses'
import Logo from './shared/Logo'
import Routes from './Routes'
import Tiles from './Tiles'

export default class LoginForm extends React.Component
{
    constructor()
    {
        super()

        this.state = 
        {
            username: '',
            password: '',
            student: false,
            instructor: false,
            error_password: '',
            error_username: ''
        }

        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(event)
    {
        this.setState({error_username:'', error_password:'', [event.target.name]: event.target.value})
        console.log(this.state)
        event.preventDefault()
    }

    onSubmit(event)
    {
        event.preventDefault()
        if (this.state.username && this.state.password)
        {
            this.props.loginRequest({username: this.state.username, password: this.state.password})
            .then(response => 
                {
                    this.setState(    // THE SERVER WILL SEND THE RELEVANT DATA HERE
                    {
                        username: '',
                        password: '',
                        student: response.data.student, 
                        error_username: response.data.error_username, 
                        error_password: response.data.error_password
                    })
                })
        }
        else
            this.setState({error_username: 'Please enter username', error_password: 'Please enter password.'})
    }

    render()
    {
        const styles =
        {
            buttonStyle:
            {
                margin: 'auto',
                width: '83'
            }
        }

        if (this.state.student)  ///  REDIRECT IS HAPPENING HERE
        {
            return (
            <Redirect to = {{
                pathname: '/loginS/student',
                state: { course_information }  /// HERE I WILL SEND THE RELEVANT INFORMATION THAT THE SERVER SENDS TO THE COMPONENT A 
            }}/> )
        }
        else if (this.state.instructor)
        {
            return <Redirect to = {'/loginI/instructor'} />
        }
        else 
        {
            // NOT RELEVANT
        }

        return(

            display 
        )
    }
}

LoginForm.propTypes = 
{
    loginRequest: PropTypes.func.isRequired
}

Routes.js

import React from 'react'
import { Switch, Route } from 'react-router-dom'

import Courses from '../pages/Courses'
import Login from './Login'
import Dashboard from './Dashboard'
import StudentsHandle from './StudentsHandle'
import CourseItem from './CourseItem'
import SemesterItem from './SemesterItem'
import Logo from './shared/Logo'
import Tiles from './Tiles'

export default class Routes extends React.Component
{
    render() 
    {
        return(
            <Switch>
                <Route exact path = '/' component = { Dashboard }/>
                <Route exact path = '/loginS' component = { Login } />
                <Route path = '/loginS/student' render = { (props) =>  < Tiles data = {this.props.coursesData} />} /> // HOW DO I ACCESS THE PROPS REDIRECT SENDS HERE?
                <Route path = '/instructor' component = { Courses } />
            </Switch>
        );
    }
} 

推荐答案

您可以使用 location 道具访问您已通过的状态.访问 React-Router 以供参考.当你想访问那个状态时，你可以通过this.props.location.state来实现.

You can use the location prop to access the state you have passed. Visit React-Router for reference. When you want to access that state, you can do it by this.props.location.state.

这篇关于React router v4 - 如何访问通过重定向传递的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！