React 应用程序拆分为 2 个应用程序

Question

我有主要的反应应用程序，我想将其拆分为 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 代码）..

有什么帮助吗？

Answer 1

您在MobileView 中缺少<Route /> 的属性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" component={ScanPayments}></Route>
        <Redirect path="**" to="/mobile/scan-payment" />
      </Switch>
    </Suspense>
  );
};

MobileAppView.displayName = 'MobileAppView';
MobileAppView.defaultProps = {};

export default React.memo(MobileAppView);