React 路由器 - 代码拆分惰性导入。外挂悬念切换答案

【问题标题】：React router - code splitting lazy imports. Switch with Suspense outsideReact 路由器 - 代码拆分惰性导入。外挂悬念切换
【发布时间】：2021-09-17 04:49:03
【问题描述】：

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

我的路线是这样设置的（localRoutes 在底部）：

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

在我的BrowserRouter 中，我根据用户是否有权使用该路线来映射路线。我怀疑问题出在这里，但不明白为什么返回Route 的Route 或AuthRoute 不起作用，因为它直接位于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,
  }
];

【问题讨论】：

标签： reactjs react-router-dom webpack-module-federation

【解决方案1】：

我认为如果你在三元运算符之前添加一个返回值，上面的代码应该可以工作

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>

【讨论】：

很遗憾没有。

【解决方案2】：

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

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

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

【讨论】：

有趣的是，我在 AuthRoute 组件（处理它）而不是在需要它的 Route 组件上拥有它。谢谢指出