react-router-fetch-in-component-example.js

import React, { Component } from 'react'
import { withRouter } from 'react-router'
import reactRouterFetch from 'react-router-fetch'
 
class App extends Component {
 
  state = {
    isAppFetching: false,
    appFetchingError: null
  }
 
  componentWillMount () {
    this.fetchRoutes(this.props)
  }
 
  componentWillReceiveProps (nextProps) {
    const current = `${this.props.location.pathname}${this.props.location.search}`
    const next = `${nextProps.location.pathname}${nextProps.location.search}`
    if (current === next) {
     return
    }
    this.fetchRoutes(nextProps)
  }
 
  shouldComponentUpdate (nextProps, nextState) {
    return !nextState.isAppFetching
  }
 
  fetchRoutes (props) {
    const { dispatch, location } = props
    this.setState({
      isAppFetching: true,
      appFetchingError: null
    })
    //maybe show a progress bar somewhere outside of react? go nuts!! 
    reactRouterFetch(routeConfig, location, { dispatch })
      .then((results) => {
        this.setState({
          isAppFetching: false
        })
      })
      .catch((err) => {
        this.setState({
          isAppFetching: false,
          appFetchingError: err
        })
      })
  }
 
  render () {
    //do something with isAppFetching for the first render if single page app. 
    // after the first render, the page contents will stay put until the next route's data is ready to go, so you'll have to do something outside of this. 
    return (
      ...
    )
  }
 
}
 
 
const connectedApp = connect()(App)
export default withRouter(connectedApp)