Question

我正在使用React Loadable在显示组件之间显示快速加载消息。但是，在生产中，它不显示组件，而仅显示“正在加载...”消息。由于某种原因，它可以在本地运行（localhost：3000），但是在实时环境中测试时不会呈现。

这是我到目前为止的代码：

routes.js

// Loading function component
function Loading() {
  return <div>Loading...</div>;
}

const Compose = Loadable({
  loader: () => import('./views/Apps/Email/Compose'),
  loading: Loading,
});

const Inbox = Loadable({
  loader: () => import('./views/Apps/Email/Inbox'),
  loading: Loading,
});

const Message = Loadable({
  loader: () => import('./views/Apps/Email/Message'),
  loading: Loading,
});
.....etc

App.js

function Loading() {
  return <div>Loading...</div>;
};

const DefaultLayout = Loadable({
  loader: () => import('./containers/DefaultLayout'),
  loading: Loading,
});

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
        <Route exact path="/login" name="Login Page" component={Login} />
          <Route exact path="/register" name="Register Page" component={Register} />
          <Route exact path="/404" name="Page 404" component={Page404} />
          <Route exact path="/500" name="Page 500" component={Page500} />
          <Route path="/" name="Home" component={DefaultLayout} />
        </Switch>
      </BrowserRouter>
    );
  }
}

DefaultLayout.js

 <main className="main">
        <AppBreadcrumb appRoutes={routes}/>
        <Container fluid>
          <Switch>
            {routes.map((route, idx) => {
                return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                    <route.component {...props} />
                  )} />)
                  : (null);
              },
            )}
            <Redirect from="/" to="/dashboard"></Redirect>
          </Switch>
        </Container>

还有一件事要提到*，我将在用户使用Google OAuth成功登录后显示这些组件/路由。这是我的重定向：

Login.js

if (postData) {
  PostData('api/v1/zuulusers', postData).then((result) => {
     let responseJson = result;
     localStorage.setItem("userData", JSON.stringify(responseJson));
     this.setState({redirect: true});
  });
  } else {}
}
render() {

  if (this.state.redirect || localStorage.getItem('userData')) {
    return (<Redirect to={'/'}/>)
}

Answer 1

这是react-loadable的问题。不建议将该库与React一起使用。由于某种原因，该库无法正确读取块，因为它在WebPack v4 +中无法正常工作，并且该库不再维护。要解决该问题，您应该迁移到React.lazy（如果不需要服务器渲染）-https://reactjs.org/docs/code-splitting.html或其他库，例如@ loadable.component-https://www.npmjs.com/package/@loadable/component。第二个建议（如果您没有一个大项目）：不缩小代码不是问题，但这当然取决于您。

反应可加载的非渲染组件，仅显示加载功能

1 个答案: