Question

我使用React Router和React Loadable代码根据路线分割我的应用程序：

在App.js中：

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

在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} />;
    }
}

在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} />;
    }
}

如何根据路线预加载组件？例如，从首页开始，大多数用户将导航到/ page1，所以我想预加载它。

当打开/ page1时，我想预取/ page2。

Answer 1

Loadable创建的组件公开了静态预加载方法。在您的情况下，您需要导出每个LoadableComponent并在您想要的适当文件* .js中预加载。例如：

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

基于React可加载和反应路由器的路由预取？

1 个答案: