React-маршрутизатор: компонент обновления маршрута на новом реквизите

Question

App.js

import React, { Component } from 'react'; 
import { Router, Route, browserHistory } from 'react-router'; 
import Login from './Login'; 
import Courses from './Courses'; 

class App extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     username: '', 
     password: '' 
    }; 
    } 

    setCredentials = ({ username, password }) => { 
    this.setState({ 
     username, 
     password 
    }); 
    } 

    render() { 
    return (
     <Router history={browserHistory}> 
     <Route 
      path='/' 
      component={Login} 
      setCredentials={this.setCredentials} 
      /> 
     <Route 
      path='/courses' 
      component={Courses} 
      credentials={this.state} 
      /> 
     </Router> 
    ); 
    } 
} 

Login компонента принимает учетные данные от пользователя, проверяет их с помощью вызова API, состояние обновления App «ы с ними , а затем перенаправляется на компонент Courses с использованием this.props.router.push('/courses').

Courses компонент должен принять в обновленных учетных данных (т.е. App обновленные, состояние) в качестве реквизита, а затем выполнить вызов API для извлечения курсов данного пользователя.

Как я могу обнаружить обновления в состоянии App внутри компонента Courses? Я вообще делаю это неправильно?

Answer 1

Pass реквизита в компонент маршрута правильно:

<Route 
     path='/' 
     component={(props) => <Login setCredentials={this.setCredentials} {...props} />} 
     /> 

и НЕ :

<Route 
     path='/' 
     component={Login} 
     setCredentials={this.setCredentials} 
     /> 

То же самое для Courses компонента, вы передаете е Xtra-реквизита одинаково:

<Route 
     path='/courses' 
     component={(props) => <Courses credentials={this.state} {...props} />} 
     /> 

И НЕ:

<Route 
     path='/courses' 
     component={Courses} 
     credentials={this.state} 
     /> 

, который отвечает на вопрос:

Как я могу обнаружить обновления в состоянии приложения внутри компонента курсов?

так crendentials становится опорой Courses и его значение state из App.

Answer 2

Как вы сказали, с курсами компонент чтения из реквизита вы могли бы иметь жизненный цикл крюк, как так в компоненте курсы:

componentWillReceiveProps(nextProps) { 
    if(nextProps.isAuthenticated && this.props.credentials !== nextProps.credentials) { 
    // perform fetch for courses here 
    } 
}