リアクションルータv4 - リダイレクト経由で渡された状態にはどのようにアクセスしますか？

Question

私はログインの成功時に別のページにリダイレクトする反応の助けを借りてログインページを作っています。ログインが成功したときにレンダリングされるコンポーネントを 'A'と呼びましょう。私は、データベースからフェッチされたデータをコンポーネントAに渡したいと思います。私はそれを 'Redirect'コンポーネントの 'state'属性に渡しています。しかし、私は最終的にコンポーネント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で行うことができます。