React application splits to 2 applications - reactjs

Question

I have main react application which I want to split to 2 applications - using only one host. The split should be performed using routes.
This is my my main app routing:
import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DesktopApp from './components/DesktopApp';
import MobileApp from './components/MobileApp';
import classes from './App.module.scss';
interface Props { }
const AppView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
return (
<BrowserRouter>
<Suspense fallback={null}>
<Switch>
<Route path="/mobile" component={MobileApp} />
<Route path="**" component={DesktopApp} />
</Switch>
</Suspense>
</BrowserRouter>
);
};
AppView.displayName = 'AppView';
AppView.defaultProps = {};
export default React.memo(AppView);
This is my MobileApp component:
import React, { Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import classes from './MobileApp.module.scss';
const ScanPayment = React.lazy(() => import('./pages/mobile/ScanPayment/ScanPayment'));
interface Props { }
const MobileAppView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
return (
<Suspense fallback={null}>
<Switch>
<Route path="/mobile/scan-payment"></Route>
<Redirect path="**" to="/mobile/scan-payment" />
</Switch>
</Suspense>
);
};
MobileAppView.displayName = 'MobileAppView';
MobileAppView.defaultProps = {};
export default React.memo(MobileAppView);
DesktopApp component (please focus the routes - the rest are really irrelevant):
import React, { Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import AuthIntro from './pages/desktop/AuthIntro/AuthIntro';
import SideNav from './pages/desktop/SideNav/SideNav';
import Nav from './pages/desktop/Nav/Nav';
import { IUser } from '../models/user';
import classes from './DesktopApp.module.scss';
const Login = React.lazy(() => import('./pages/desktop/Login/Login'));
const Register = React.lazy(() => import('./pages/desktop/Register/Register'));
const ForgotPassword = React.lazy(() => import('./pages/desktop/ForgotPassword/ForgotPassword'));
const Dashboard = React.lazy(() => import('./pages/desktop/Dashboard/Dashboard'));
const UpdateDetails = React.lazy(() => import('./pages/desktop/UpdateDetails/UpdateDetails'));
const RepresentativesList = React.lazy(() => import('./pages/desktop/RepresentativesList/RepresentativesList'));
const AddRepresentative = React.lazy(() => import('./pages/desktop/AddRepresentative/AddRepresentative'));
const UpdateRepresentative = React.lazy(() => import('./pages/desktop/UpdateRepresentative/UpdateRepresentative'));
const NewPayment = React.lazy(() => import('./pages/desktop/NewPayment/NewPayment'));
interface Props {
loggedIn: boolean | null;
user: IUser | null;
}
const DesktopAppView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
return (
<Suspense fallback={null}>
{props.loggedIn === false && (
<React.Fragment>
<AuthIntro />
<Switch>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/forgot-password" component={ForgotPassword} />
<Redirect path="**" to="/login" />
</Switch>
</React.Fragment>
)}
{props.loggedIn && (
<React.Fragment>
<SideNav />
<div className={classes['container']}>
<Nav
officeName={props.user!.officeName}
BNNumber={props.user!.BNNumber}
/>
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route path="/update-details" component={UpdateDetails} />
<Route path="/representatives-list" component={RepresentativesList} />
<Route path="/add-representative" component={AddRepresentative} />
<Route path="/update-representative/:id" component={UpdateRepresentative} />
<Route path="/new-payment" component={NewPayment} />
<Redirect path="**" to="/dashboard" />
</Switch>
</div>
</React.Fragment>
)}
</Suspense>
);
};
DesktopAppView.displayName = 'DesktopAppView';
DesktopAppView.defaultProps = {};
export default React.memo(DesktopAppView);
Accessing the desktop routes is working great, but I can't access the mobile routes.
When I go to the url http://localhost:4200/mobile/scan-payment I see blank page. no HTML at all (but of course there should be HTML code)..
Any help?

Answer 1

You missing property component for the <Route /> in MobileView:
import React, { Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import classes from './MobileApp.module.scss';
const ScanPayment = React.lazy(() => import('./pages/mobile/ScanPayment/ScanPayment'));
interface Props { }
const MobileAppView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
return (
<Suspense fallback={null}>
<Switch>
<Route path="/mobile/scan-payment" component={ScanPayments}></Route>
<Redirect path="**" to="/mobile/scan-payment" />
</Switch>
</Suspense>
);
};
MobileAppView.displayName = 'MobileAppView';
MobileAppView.defaultProps = {};
export default React.memo(MobileAppView);