manages transitions and data dependencies when loading a new route
Higher order component to enable loading states between route transitions and fetch data for the new route
A super simple app example has been created at https://github.com/kellyrmilligan/react-route-transition-manager-example
There is a lot of boilerplate involved when using react router and fetching the necessary data when transitioning from route to route. This is an attempt to simplify this process with 2 primary features:
inspired by https://github.com/ReactTraining/react-router/issues/2101
If you use redux, there is a version of this component with some redux niceness built in.
in your top level component, between react router and your app, wrap it's contents with transition manger like so...
import TransitionManager from 'react-route-transition-manager'
const ErrorPage = (props) => (
<div className="Error">Ooops! there was an error...</div>
)
const LoadingIndicator = (props) => (
<div className="Loader">loading...</div>
)
const SplashScreen = (props) => (
<div className='Splashing'><p>welcome to this brave new world...</p></div>
)
const App = (props) =>
<TransitionManager {...props}
onFetchStart={() => console.log('started fetching data for routes')}
onFetchEnd={() => console.log('finished fetching data for routes')}
onError={(err) => console.log('an error happened while fetching data for routes ', err)}
FetchingIndicator={<LoadingIndicator />}
ErrorIndicator={<ErrorPage />}
SplashScreen={<SplashScreen />}
>
<Header />
<div className="App">
{props.children}
</div>
</TransitionManager>
this will do a few things. when the route starts to change, it will do the following:
onFetchStart
FetchingIndicator
into the body of the page so you can style it above your app more easily and add a class to the body
, TransitionManager-body-is-fetching
onFetchEnd
onError
and render the ErrorIndicator
componentThis allows you to specify at the route handler level what data that route needs via a static fetch method. The fetching itself should be wired up to redux via thunks, or whatever way you want to handle that. the only requirement is that the static method returns a promise.
import React, { Component } from 'react'
import { connect } from 'react-redux'
import fetchStuff from 'data/stuff/fetchStuff' //your async action
class Page extends Component {
static fetch(params, query) {
return new Promise((resolve, reject) => {
//do something to get the data this route needs, and have it end up in a store somewhere, like a flux store, etc.
})
}
render() {
return (
<p>the stuff</p>
)
}
}
The reactRouterFetch module is used to call the static methods on the matched route handlers. it will call the fetch method with the react router params(path params) and the query(?id=whatever
)
onFetchStart: PropTypes.func
- This is a function that will be called when fetching starts.
onFetchEnd: PropTypes.func
- This is called when fetching ends
onError: PropTypes.func
- This is called when an error occurs during transition, like a request fails
FetchingIndicator: PropTypes.element
- This will be rendered outside the react component tree into the body, so you can use css to put it above the application.
ErrorIndicator: PropTypes.element
- This will be rendered instead of props.children
when an error occurs.
SplashScreen: PropTypes.element
- This is the element to be shown for the initial page load. your loading indicator may be enough, so this is optional
fetchInitial: PropTypes.bool
- This is for using this in client side apps only, this will initiate a fetch of the route right away, since the data wasn't loaded from the server.
showIndicatorOnInitial
- This prop will control whether or not you want to also show your loading indicator on the initial load. Depending on your ui, you may want to have a splash screen with a loading bar at the top of the page or something.
pass-through
, where if an error happens on a certain route, you will be able to handle the error in the route handler instead if you want to.