javascript - React Lazy 做 Switch 没用？

Question

在此处输入图像描述

我在使用 React 时遇到了一个错误。懒惰然后404显示在另一条路线上。

import React, { lazy, Suspense } from "react";
import { Route, Switch } from "react-router-dom";
import "./styles.css";

const HomePage = lazy(() => import("./homepage"));
const ContactPage = lazy(() => import("./contact"));
const Page404 = lazy(() => import("./notfound"));

export default function App() {
  return (
    <div className="App">
      <Switch>
        <Suspense fallback={<h1>Loading ...</h1>}>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/contact" component={ContactPage} />
          <Route component={Page404} />
        </Suspense>
      </Switch>
    </div>
  );
}

链接代码在底部。请帮我 ：（

链接代码在这里

Answer 1

import React, { lazy, Suspense } from "react";
import { Route, Switch } from "react-router-dom";
import "./styles.css";

const HomePage = lazy(() => import("./homepage"));
const ContactPage = lazy(() => import("./contact"));
const Page404 = lazy(() => import("./notfound"));

export default function App() {
  return (
    <div className="App">
      
        <Suspense fallback={<h1>Loading ...</h1>}>
          **<Switch>**
            <Route exact path="/" component={HomePage} />
            <Route exact path="/contact" component={ContactPage} />
            <Route component={Page404} />
          **</Switch>**
        </Suspense>
     
    </div>
  );
}

对不起，大家，我试着把 Switch 移到 <Suspense/> 然后这个工作，但我不明白它工作。

我阅读了有关 Switch 应该只是 Route 的文档。如此动人，所以这项工作。