React 可加载不渲染组件，仅显示加载功能

Question

I am using React Loadable to show a quick loading message in between displaying components. However, in production, it is not displaying the component and is only showing the "Loading..." message. For some reason, it works locally (localhost:3000), but it won't render when tested in a live environment.

This is the code i have thus far:

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>

One more thing to mention*, I am displaying these components/routes after a user is successfully logged in using Google OAuth. Here are my redirects:

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

It is the issue with react-loadable. This library is not recommended for using with React. For some reason this library reads the chunks not correctly as it works badly with WebPack v4+ and also this library is no more maintaining. To fix that problem you should migrate to React.lazy (if you do not need server render) - https://reactjs.org/docs/code-splitting.html , or another library like @loadable.component - https://www.npmjs.com/package/@loadable/component . The second advise (if you have not a big project): it is not a problem just not to minify your code, but of course it is up to you.

Answer 2

I also faced smilar issue, but with React 16.6.0, you can be able to use React.lazy and get rid of react-loadable library.

• https://blog.bitsrc.io/lazy-loading-react-components-with-react-lazy-and-suspense-f05c4cfde10c