reactjs - แอปพลิเคชัน React แบ่งออกเป็น 2 แอปพลิเคชัน

ฉันมีแอปพลิเคชัน React หลักที่ฉันต้องการจะแบ่งออกเป็น 2 แอปพลิเคชัน โดยใช้โฮสต์เพียงอันเดียว การแยกควรทำโดยใช้เส้นทาง

นี่คือการจัดเส้นทางแอปหลักของฉัน:

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

นี่คือคอมโพเนนต์ MobileApp ของฉัน:

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 (กรุณาเน้นที่เส้นทาง - ส่วนที่เหลือไม่เกี่ยวข้องจริงๆ):

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

การเข้าถึงเส้นทางเดสก์ท็อปทำงานได้ดี แต่ฉันไม่สามารถเข้าถึงเส้นทางมือถือได้ เมื่อฉันไปที่ URL http://localhost:4200/mobile/scan-payment ฉันเห็นหน้าเปล่า ไม่มี HTML เลย (แต่แน่นอนว่าควรจะมีโค้ด HTML)

ช่วยอะไรได้บ้าง?

คำตอบ #1

คุณขาดคุณสมบัติ component สำหรับ <Route /> ใน 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);