Question

遵循诸如this one之类的教程，我可以使用react-loadable来实现代码拆分和lay-load；像这样的东西：

const AsyncHome = Loadable({
  loader: () => import("./components/Home"),
  loading: MyLoadingComponent
});
const AsyncContact = Loadable({
  loader: () => import("./components/Contact"),
  loading: MyLoadingComponent
});
...
return (
  <BrowserRouter>
      <Route path="/" exact component={AsyncHome} />
      <Route path="/contact/" component={AsyncContact} />
  </BrowserRouter>
)
...

因为我有很多路由，所以我想创建一个集中的路由信息源。我为每个路由创建了一个单独的路由对象（本身），将它们全部放入一个“ Routes”对象中，并且我试图在地图中动态呈现包含异步组件的Routes。我在Route Component的component属性内调用Loadable函数。使用上面的示例可以做到这一点：

const Home = {
  route: "/home/",
  path: "./components/Home"
};
const Contact = {
  route: "/contact/",
  path: "./components/Contact"
};
const Routes = {
  Home,
  Contact
};
...
return (
  <BrowserRouter>
    {
      Object.values(Routes).map(e => {
      return (
        <Route
          key={e.route}
          path={e.route}
          exact
          component={Loadable({
              loader: () => import(e.path),
              loading: MyLoadingComponent
          })}
          />
        );
      })
    }
  </BrowserRouter>
)
...

但这会产生一个错误。显示“加载组件”的错误部分。这是我的加载组件的外观：

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (isLoading) {
    return (
      <div>loading...</div>
    );
  }
  // Handle the error state
  else if (error) {
    return <div>Sorry, there was a problem loading the page.</div>;
  } else {
    return null;
  }
};

如果我console.log(error)，我得到module not found './components/Home'。

重要的是，如果像这样将原始字符串粘贴到地图中，它确实可以工作；它为每条路线加载相同的组件。为什么我不能在import（）函数中使用地图中的字符串？

...
return (
  <BrowserRouter>
    {
      Object.values(Routes).map(e => {
      return (
        <Route
          key={e.route}
          path={e.route}
          exact
          component={Loadable({
              loader: () => import('./components/Home'),
              loading: MyLoadingComponent
          })}
          />
        );
      })
    }
  </BrowserRouter>
)
...

有人可以给我任何有关如何解决此问题的建议吗？这是不可能的还是我犯错了？谢谢。

已解决

我通过将e.path更改为${e.path}（由反引号包围）来解决此问题。

这是怎么回事？为什么对象制作字符串...而不是字符串？

在循环/映射中具有异步react-loadable组件的react-router

0 个答案: