时间戳

首页 > 解决方案 > 使用 BrowserRouter Lazy 和 Suspense 延迟加载页面

reactjs - 使用 BrowserRouter Lazy 和 Suspense 延迟加载页面

问题描述

延迟加载路由是有意义的，因为它们通常是许多组件树的根。我希望能够在加载下一条路线时显示当前路线。用户希望在页面加载时稍等片刻。

我得到的错误是Error: A React component suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

我使用的代码是...

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

const Home = lazy(() => import('./home'));
const Props = lazy(() => import('./props'));
const State = lazy(() => import('./state'));


const Router: React.FC = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path = '/' component = {Home} />
        <Route exact path = '/state' component = {State} />
        <Route exact path = '/props' component = {Props} />
        <Suspense fallback={Home}>
          <Route component = {Home}/>
        </Suspense>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

标签： reactjs

解决方案

只是Suspense环绕Switch。

import ReactDOM from "react-dom";
import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const Home = lazy(() => import("./home"));
const About = lazy(() => import("./about"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading..</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route component={Home} />
        </Switch>
      </Suspense>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望有帮助！！！

推荐阅读