代码之家 › 专栏 › 技术社区 › Mohammad

如何使用React Loadable和React路由器?

react-loadable reactjs javascript

3

Mohammad · 技术社区 · 6 年前

我正在尝试实现一个有10-15页的应用程序。这与react路由器很好地工作,但我应该使用react loadable有一个旋转器和加载效果…

但是,如何在可加载的内部导入路由器组件?

我应该为每个组件创建一个常量变量?

这样地:

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>
        )
    }
}

或者有可能用其他技巧?

1 回复 | 直到 6 年前

1

Ukasha 6 年前

这有点棘手。您不需要使用React Loadable。

演示 here .

如果要为图像和其他组件制作加载程序,直到 onLoad ,您可以使用 react-content-loader 而是创建骨架屏幕(请参见 components/Image.js 在演示中)。它可以使“几乎”完美的装载机。到目前为止,这是我能做的。我不知道该检测 重载 对于CSS:。(

您可以创建一个名为 routes.js 包括所有页面。

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

路由.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,
   },
];

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

使用base.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>