React Lazy made 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 на , тогда это работает, но я не понимаю, что это работает.

Я читал документацию, что Switch должен просто маршрутизировать. так движется вот так, так что эта работа.