app_route_split.tsx

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

const Home = lazy(() =>
  import("./home" /* webpackChunkName: "HomePage" */)
);

const Login = lazy(() =>
  import("./login" /* webpackChunkName: "LoginPage" */)
);

const Profile = lazy(() =>
  import("./profile" /* webpackChunkName: "Profile" */)
);

const MyComponent = () => {
return ( 
<Suspense fallback={<div>Loading.....</div>}>
  <Switch>
    <Route path="/home">
      <Home />
    </Route>
    <Route path="/login">
      <Login />
    </Route>
    <Route path="/profile">
      <Profile />
    </Route>
  </Switch>
</Suspense>
  )
}