1

我正在使用 create-react-app 构建一个 React 应用程序，现在我正在为其中的代码拆分而苦苦挣扎。我正在使用反应加载。在开发环境中一切都很好，但是当它在一些更深的路线上构建一些块时（例如 /test/2 或 /test-a/42）没有加载，因为没有找到块（404）。

这就是我使用 react-loadable 加载组件的方式

.....

const test = Loadable({
  loader: () => import("../test/test"),
  loading: Loading
});
const testdetail = Loadable({
  loader: () => import("../test/testdetail"),
  loading: Loading
});
const testa = Loadable({
  loader: () => import("../test/testa"),
  loading: Loading
});
const testadetail = Loadable({
  loader: () => import("../test/testadetail"),
  loading: Loading
});

.....

这是我在路线中使用这些组件的方式

<Switch>
  <Route
    exact
    path="/test"
    component={test}
    />
   <Route
    path="/test/:id"
    component={testdetail}
    />
  <Route
    exact
    path="/test-a"
    component={testa}
    />
  <Route
    path="/test-a/:id"
    component={testadetail}
    />
</Switch>

正如我所说，在开发模式下一切似乎都很好，但是在我构建应用程序后，在生产模式下找不到路线/test/:id和块。/test-a/:id任何答案都会真正挽救我的生命，谢谢

4

1 回答 1

0

代码似乎没问题。您是否尝试过其他库，例如“ loadable-component ”

. 您还可以使用新的升级到 CRA-2.0

React.lazy

和

Suspense 也用于代码拆分和许多其他东西。检查文档。. 如果您不使用 SSR，那么您可以尝试这些。

于 2018-11-06T12:32:04.627 回答