如何在react-router中使用react-loadable？

Question

我正在尝试实现具有10-15页的应用程序。 那可以很好地与react-router一起工作，但是我应该使用react-loadable来获得Spinner和加载效果...

但是，如何将路由器组件导入可加载项中？

我应该为每个组件创建一个const变量吗？

像这样 ：

 const Home = Loadable({ loader: () => import('./Home'), loading: Loading, }); const News = Loadable({ loader: () => import('./News'), loading: Loading, }); const Gallery = Loadable({ loader: () => import('./Gallery'), loading: Loading, }); class App extends React.Component { render() { return ( <Router> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/gallery" component={Gallery} /> </Router> ) } } 

还是其他技巧也有可能？

Answer 1

这有点棘手。 您不需要使用react-loadable。

演示在这里 。

如果要在图像和其他组件加载到onLoad之前为其制作加载器，则可以使用react-content-loader来创建框架屏幕（请参见演示中的components/Image.js ）。 它可以使“几乎”完美的装载机。 到目前为止，这是我能做的。 我不知道为css检测onLoad :(

您可以创建一个包含所有页面的名为routes.js的新文件。

- /src
-- /pages
--- Gallery.js
--- Home.js
--- News.js
--- withBase.js
-- App.js
-- routes.js

routes.js

import Home from './pages/Home';
import Gallery from './pages/Gallery';
import News from './pages/News';
// Add as much as you want...

export default [
   {
       path: '/',
       component: Home,
   },
   {
       path: '/gallery',
       component: Gallery,
   },
   {
       path: '/news',
       component: News,
   },
];

您需要创建一个将包装每个页面的高级组件。

withBase.js（HOC）

import React from "react";

export default WrappedComponent =>
  class extends React.Component {
    state = {
      isLoading: true
    };

    componentDidMount() {
      this.hideLoader();
    }

    hideLoader = () => {
      // This is for demo purpose
      const proc = new Promise(resolve => {
        setTimeout(() => resolve(), 3000);
      });
      proc.then(() => this.setState({ isLoading: false }));
    };

    render() {
      return (
        <div>
          {this.state.isLoading ? <p>Loading...</p> : <WrappedComponent />}
        </div>
      );
    }
  };

用法：例如， export default withBase(Home) 。

然后，在App.js仅循环路由。

    <Switch>
      {routes.map(route => (
        <Route
          exact
          key={route.path}
          path={route.path}
          component={route.component}
        />
      ))}
    </Switch>