Wrapper for react-router that allows you to load data before switching the screen
DEMO (React Router 6)
DEMO 0.x.x (React Router 5)
| react | >= 16.8 | |
| react-router | ^5.0.0 | Package version 0.x.x |
| react-router | ^6.0.0 | Package version 1.x.x |
This package uses react-router (react-router-dom or react-router-native) as main router so you should implement it in your project first.
npm install react-router-loading ## or yarn add react-router-loadingIn your router section import Routes and Route from react-router-loading instead of react-router-dom or react-router-native
import { Routes, Route } from "react-router-loading"; <Routes> <Route path="/page1" element={<Page1 />} /> <Route path="/page2" element={<Page2 />} /> ... </Routes>Add loading prop to every route that needs to be loaded before switching
<Routes> // data will be loaded before switching <Route path="/page1" element={<Page1 />} loading /> // instant switch as before <Route path="/page2" element={<Page2 />} /> ... </Routes>Add loadingContext.done() at the end of your initial loading method in components that mentioned in routes with loading prop (in this case it's Page1)
import { useLoadingContext } from "react-router-loading"; const loadingContext = useLoadingContext(); const loading = async () => { // loading some data // call method to indicate that loading is done and we are ready to switch loadingContext.done(); };In your router section import Switch and Route from react-router-loading instead of react-router-dom
import { Switch, Route } from "react-router-loading"; <Switch> <Route path="/page1" component={Page1} /> <Route path="/page2" component={Page2} /> ... </Switch>Add loading prop to every route that needs to be loaded before switching
<Switch> // data will be loaded before switching <Route path="/page1" component={Page1} loading /> // instant switch as before <Route path="/page2" component={Page2} /> ... </Switch>Add loadingContext.done() at the end of your initial loading method in components that mentioned in routes with loading prop (in this case it's Page1)
import { LoadingContext } from "react-router-loading"; const loadingContext = useContext(LoadingContext); const loading = async () => { // loading some data // call method to indicate that loading is done and we are ready to switch loadingContext.done(); };import { LoadingContext } from "react-router-loading"; class ClassComponent extends React.Component { ... loading = async () => { // loading some data // call method from props to indicate that loading is done this.props.loadingContext.done(); }; ... }; // we should wrap class component with Context Provider to get access to loading methods const ClassComponentWrapper = (props) => <LoadingContext.Consumer> {loadingContext => <ClassComponent loadingContext={loadingContext} {...props} />} </LoadingContext.Consumer>You can specify loading screen that will be shown at the first loading of your app
const MyLoadingScreen = () => <div>Loading...</div> <Routes loadingScreen={MyLoadingScreen}> // or <Switch> ... </Routes>Use maxLoadingTime property if you want to limit loading time. Pages will switch if loading takes more time than specified in this property (ms).
<Routes maxLoadingTime={500}> // or <Switch> ... </Routes>If you want to change LoadingContext globally you can pass isLoading property to the <Routes /> or <Switch />. This way you don't need to add extra loadingContext.done(); in your page components after fetching is done.
import { useIsFetching } from 'react-query'; const isFetching = useIsFetching(); <Routes isLoading={isFetching}> // or <Switch> ... </Routes>Call topbar.config() if you want to change topbar configuration. More info here.
import { topbar } from "react-router-loading"; topbar.config({ autoRun: false, barThickness: 5, barColors: { 0: 'rgba(26, 188, 156, .7)', .3: 'rgba(41, 128, 185, .7)', 1.0: 'rgba(231, 76, 60, .7)' }, shadowBlur: 5, shadowColor: 'red', className: 'topbar' });Clone repository and run
# go to lib folder cd packages/react-router-loading # restore packages yarn # build lib yarn build # go to example folder cd ../../examples/react-router-6 # restore packages yarn # run example yarn devrun yarn build in lib folder each time you want to apply changes