리얼 라우터 v4 - 리디렉션을 통해 전달되는 상태에 어떻게 액세스합니까?

Question

나는 로그인이 성공했을 때 다른 페이지로 리디렉션하는 반응의 도움으로 로그인 페이지를 만들고 있습니다. 로그인이 성공하면 'A'가 렌더링되는 구성 요소를 호출하겠습니다. 데이터베이스에서 가져온 데이터를 구성 요소 A로 전달하려면 '리디렉션'구성 요소의 '상태'특성에 전달하면됩니다. 그러나 궁극적으로 구성 요소 A를 렌더링하는 'Route'구성 요소에서이 상태에 액세스하는 방법을 이해할 수 없습니다. 다음과 같이

내 코드는 다음과 같습니다

Login.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> 
     ); 
    } 
} 

Answer 1

당신은 통과 한 상태에 액세스 할 수 location 소품을 사용할 수 있습니다. 참고로 React-Router을 방문하십시오. 해당 상태에 액세스하려면 this.props.location.state으로 수행 할 수 있습니다.