Блог

У меня есть основное приложение 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 amp;amp; (
        <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 amp;amp; (
        <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-код)..

Какая-нибудь помощь?

Вам не хватает имущества 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);