React Lazy made Switch Not using?

Question

enter image description here

I have a bug when I using React. Lazy then 404 display at another route.

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

Link Code at the bottom. Please help me :(

Link code at here

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

Sorry, everyone, I try moving Switch to < Suspense/> then this work but I don't understand it work.

I read documentation arround Switch should Just Route. so moving like this so this work.