Prefetch based on route with React Loadable and React Router?

Question

Im using React Router and React Loadable to code split my app based on route:

In App.js:

<Router>
    <Switch>
       <Route exact path="/page1" component={Component1Loader} />
       <Route exact path="/page2" component={Component2Loader} />

In Component1Loader:

import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./ActualComponent1'),
    loading: Loading,
});

export default class Component1Loader extends React.Component {
    render() {
        return <LoadableComponent {...this.props} />;
    }
}

In Component2Loader:

import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./ActualComponent2'),
    loading: Loading,
});

export default class Component2Loader extends React.Component {
    render() {
        return <LoadableComponent {...this.props} />;
    }
}

How can I preload components based on route? Eg from the front page most users will then navigate to /page1 so I would like to preload this.

When on /page1 I would then like to prefetch /page2.

童Michael · Accepted Answer · 2018-04-21 01:50:31Z

3

The component created by Loadable exposes a static preload method. In your case you need to export each LoadableComponent and preload in appropriate file *.js you want to. Example:

import { LoadableComponent } from './Component1Loader'

// Preload here
LoadableComponent.preload()

...

<Router>
  <Switch>
    <Route exact path="/page1" component={Component1Loader} />
    <Route exact path="/page2" component={Component2Loader} />

https://github.com/jamiebuilds/react-loadable#preloading

answered Apr 21, 2018 at 1:50

童Michael

1761 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prefetch based on route with React Loadable and React Router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related