React router - 代码拆分惰性导入。外挂悬念切换

Question

我正在使用来自 webpack 的模块联合，我的核心应用程序包含到应用程序其余部分的所有路由。工作正常的是，在 Switch 中，我只是手动设置了每个 AuthRoute 或 Route，而不是使用 map。 Suspense 包装了 Switch，因此直接子级只是 Route。我现在正在做一些拆分，但我无法让它工作。有什么想法吗？

我的路由是这样设置的（本地路由在底部）：

const routes = [
  ...localRoutes,
  // ...remoteRoutes
];

在我的 BrowserRouter 中，我根据用户是否有权使用该路线来映射路线。我怀疑问题出在这里，但不明白为什么 Route 或 AuthRoute 那个 returns 一个 Route 不起作用，因为它直接在 Switch 下.

  <Switch>
    {routes.map((route) => {
      console.log(route)
      route.auth ?
        <AuthRoute
          key={route.path}
          path={route.path}
          component={route.component}
          exact={route.exact}
          requiredRoles={route.requiredRoles}
        />
        :
        <Route
          key={route.path}
          path={route.path}
          component={route.component}
          exact={route.exact}
        />
    })}
    <Redirect to='/login' />
  </Switch>

其中 authRoute:

const AuthRoute = ({ Component, path, exact, requiredRoles }) => {
    const isLoggedIn = true // or false
    const roles = ['admin', 'sth_else']
    const userHasRequiredRole = intersection(requiredRoles, roles).length > 0
    const message = userHasRequiredRole ? 'Please log in to view this page' : "You can't be here!"
    return (
        <Route
            exact={exact}
            path={path}
            render={(props) =>
                isLoggedIn && userHasRequiredRole 
                    ? (
                        <Component {...props} />
                    ) : (
                        <Redirect
                            to={{
                                pathname: userHasRequiredRole ?
                                    '/login' :
                                    '/modules',
                                state: {
                                    message,
                                    requestedPath: path
                                }
                            }}
                        />
                    )
            }
        />
    );
};

export default AuthRoute;

和示例路线：

const AboutPage = lazy(() => import('core/AboutPage'))
const LoginPage = lazy(() => import('core/LoginPage'))
const MyModules = lazy(() => import('core/MyModules'))

const routes = [
  {
    auth: true,
    path: "/modules",
    component: MyModules,
    exact: false,
    requiredRoles: [
        String(UserRoles.Administrator),
        String(UserRoles.AnotherRole),
        String(UserRoles.Another)
      ]
  },
  {
    auth: false,
    path: "/about",
    component: AboutPage,
    exact: false,
  }
];

Answer 1

我认为如果你在三元运算符

之前添加一个return，上面的代码应该可以工作

retur route.auth ?...

我的应用程序中有类似的结构

<Suspense fallback={<Spinner  />}>
          <Switch>
            <Refresh path="refresh" />
            {routes.map((route) => {
              return <PrivateRoute key={route.path} {...route} user={user} />;
            })}
            {routes.length && user && <Route component={NotFound} />}
          </Switch>
        </Suspense>

Answer 2

如果您正在执行 lazyLoad，请将组件指定为 <Route> 中的一个函数。

对于您的情况，请尝试以下操作：

 <Route
     key={route.path}
     path={route.path}
     component={(props) => (<route.component {...props} />)}
     exact={route.exact}
 />

React router - 代码拆分惰性导入。外挂悬念切换

React router - code splitting lazy imports. Switch with Suspense outside

reactjs

react-router-dom

webpack-module-federation