主页 / 问题 / 1100055
Accepted
DmitryDevelop
Asked:2020-03-26 18:45:27 +0000 UTC2020-03-26 18:45:27 +0000 UTC

React Router 如何加载模块？可以做一个加载栏吗？

  • 772

我是 React 新手，想知道 React Router 如何加载组件，是否可以制作加载状态栏？如果是这样，怎么做？

据我了解，React Router 从前端服务器加载 html 页面，这意味着您可以制作一个预加载器。

也许情况并非如此，当页面打开时，所有模块都已加载，它只是更改它们？

我将不胜感激。

reactjs

1 个回答

  1. Best Answer

    是的，您可以使用延迟加载：

    import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; 

const Drums = lazy(() => import('./components/Drums'));  // import
const Draw = lazy(() => import('./components/Draw'));    // import

const App = () => {        
  return (
    <div>
     <Router>
      <Route path="/" component={Header} />       
      <Suspense fallback={<h1>Loading...</h1>}>   {/* Lazy Loading Spinner */}        
        <Route path="/drums" component={Drums} />
        <Route path="/draw" component={Draw} />
        <Redirect to="/" />  
      </Suspense>
     </Router>
    <div>
   )
 }

    无需延迟加载，所有内容都会立即加载。

    • 2

相关问题