3

所以我正在开发一个在开始时使用 React@16.13.1 的 ReactJs 应用程序。但是最近我们必须将我们的 App 更新到最新版本的 React。通过升级，我面临 React Lazy 和 Suspense 的问题，并且它们正在抛出错误。

它在旧版本（16.13.1）上运行良好。

import React, { lazy, Suspense, Fragment } from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';

这是配置路由的数组。

const routesConfig = [

{
  exact: true,
  path: '/app/training',
  component: () => <Redirect to="/app/training/trainings" />
},
{
  exact: true,
  path: '/app',
  component: () => <Redirect to="/app/reports/dashboard" />
},
{
  exact: true,
  path: '/app/participant',
  component: () => <Redirect to="/app/participant/participants" />
},
{
  exact: true,
  path: '/app/activity',
  component: () => <Redirect to="/app/activity/activities" />
},
{
  exact: true,
  path: '/app/selfPacedCourses',
  component: () => <Redirect to="/app/selfPacedCourses/courses" />
},
{
  exact: true,
  path: '/app/smsAndEmail',
  component: () => <Redirect to="/app/smsAndEmail/logs" />
},
{
  exact: true,
  path: '/app/resource',
  component: () => <Redirect to="/app/resource/resourcePersons" />
},
{
  exact: true,
  path: '/app/stakeholderTraining',
  component: () => <Redirect to="/app/stakeholderTraining/4WOrganizations" />
},
{
  exact: true,
  path: '/app/report',
  component: () => <Redirect to="/app/report/trainings" />
},
{
  exact: true,
  path: '/app/tna',
  component: () => <Redirect to="/app/tna/surveys" />
},
{
  exact: true,
  path: '/404',
  component: lazy(() => import('src/views/pages/Error404View'))
}, ... ]

这就是路由配置数组的使用方式

const renderRoutes = routes =>
  routes ? (
    <Suspense fallback={<LoadingScreen />}>
      <Switch>
        {routes.map((route, i) => {
          const Guard = route.guard || Fragment;
          const Layout = route.layout || Fragment;
          const Component = route.component;

          return (
            <Route
              key={i}
              path={route.path}
              exact={route.exact}
              render={props => (
                <Guard>
                  <Layout>
                    {route.routes ? (
                      renderRoutes(route.routes)
                    ) : (
                      <Component {...props} />
                    )}
                  </Layout>
                </Guard>
              )}
            />
          );
        })}
      </Switch>
    </Suspense>
  ) : null;

function Routes() {
  return renderRoutes(routesConfig);
}

export default Routes;

注意：此代码适用于旧版本的 React。但是当我将我的包升级到最新版本时它会崩溃。

4

0 回答 0