React.lazy used in the Functional Component create a strange effect of keep loading

Question

the page I want to navigate to .

const MobileHome = () => {
  //these are the sub.components i want to display in this component
  const ChatHome = React.lazy(() => import("./ChatHome"));

  const MeHome = React.lazy(() => import("./MeHome"));

  const tabs = [
    {
      key: 1,
      title: "首页",
      icon: <AppstoreOutline />,
      element: <ChatHome />,
    },
    {
      key: 2,
      title: "我的",
      icon: <UserOutline />,
      element: <MeHome />,
    },
  ];

  const [state, setState] = React.useState({
    currentMobileRoute: tabs[0].element,
  });

  const switchMobileTabbar = (item) => {
    for (let i = 0; i < tabs.length; i++) {
      if (parseInt(item) === parseInt(tabs[i].key)) {
        setState({
          currentMobileRoute: tabs[i].element,
        });
      }
    }
  };

  return (
    <div className={"mobile-home"}>
      <div className={"mobile-router"}>{state.currentMobileRoute}</div>
      <TabBar
        safeArea={true}
        className={"mobile-tab-bar"}
        onChange={(item) => switchMobileTabbar(item)}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} />
        ))}
      </TabBar>
    </div>
  );
};

export default MobileHome;

Router Page

<React.Suspense fallback={<Loading />}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="login" element={<LoginPage />} />
    <Route path="register" element={<RegisterPage />} />
    <Route path="m/home" element={<MobileHome />} />
    <Route path="*" element={<NoMatch />} />
  </Routes>
</React.Suspense>

so if I put these React.lazy above in the Component <MobileHome/> the loading never stops. But if I put these lazy component loading out of the Component <MobileHome/> the loading stops shortly and the component appears. why ? and before you say it, the lazy component did mounted. when I console.log the Promise result of the import() I can see the component has been resolved. so why don't the loading stop?

I enter the url Its supposed to be like this . instead its like this forever`

---

So here is some new discovers. So the Doc from React reactjs.org says the lazy should be wrapped with <React.Suspense>. So I thought , just for a moment that could be the problem. So I went to check it out and it did worked. I add the React.Suspense in the return code in this component where I use the React.lazy()， and it worked.

I switch this part of the code from

return (
  <div className={"mobile-home"}>
    <div className={"mobile-router"}>{state.currentMobileRoute}</div>
    //....code
  </div>
);

to this

return (
  <div className={"mobile-home"}>
    <div className={"mobile-router"}>
      <React.Suspense fallback={<Loading />}>
        {state.currentMobileRoute}
      </React.Suspense>
    </div>
    //...code
  </div>
)

the new code is like this :

import React from "react";
import { Loading, TabBar } from "antd-mobile";
import "./Home.scss";
import { AppstoreOutline, UserOutline } from "antd-mobile-icons";

document.body.addEventListener(
  "touchmove",
  function (e) {
    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
  },
  { passive: false }
); //passive 参数不能省略，用来兼容ios和android

const MobileHome = () => {
  const chatHomeRef = React.createRef();
  const meHomeRef = React.createRef();
  //Chat主页
  const ChatHome = React.lazy(() => import("./ChatHome"));
  //个人主页
  const MeHome = React.lazy(() => import("./MeHome"));
  const tabs = [
    {
      key: 1,
      title: "首页",
      icon: <AppstoreOutline />,
      element: <ChatHome ref={chatHomeRef} />,
    },
    {
      key: 2,
      title: "我的",
      icon: <UserOutline />,
      element: <MeHome ref={meHomeRef} />,
    },
  ];

  const [state, setState] = React.useState({
    currentMobileRoute: tabs[0].element,
  });

  const switchMobileTabbar = (item) => {
    for (let i = 0; i < tabs.length; i++) {
      if (parseInt(item) === parseInt(tabs[i].key)) {
        setState({
          currentMobileRoute: tabs[i].element,
        });
      }
    }
  };

  return (
    <div className={"mobile-home"}>
      <div className={"mobile-router"}>
        <React.Suspense fallback={<Loading />}>
          {state.currentMobileRoute}
        </React.Suspense>
      </div>
      <TabBar
        safeArea={true}
        className={"mobile-tab-bar"}
        onChange={(item) => switchMobileTabbar(item)}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} />
        ))}
      </TabBar>
    </div>
  );
};

export default MobileHome;

But the problem is that the above App.js have this React.Suspense Component ! so why didn't it work there?