1

我在使用React Loadable和使用 Webpack 3.11 的基于路由的代码拆分时遇到了问题。

当我尝试在服务器上渲染我的应用程序时，我的异步模块会立即解析，而无需等待承诺。因此 SSR 输出变为<div id="root"></div>。

应用程序.js：

const App = () => (
  <Switch>
    {routes.map((route, index) => (
      <Route key={index} path={route.path} render={routeProps => {
        const RouteComponent = route.component
        return <RouteComponent {...routeProps} />
      }} />
    ))}
  </Switch>
)

我已经用 React Loadable 定义了我的异步路由组件，如下所示：

路由.js

function Loading ({ error }) {
  if (error) {
    return 'Oh nooess!'
  } else {
    return <h3>Loading...</h3>
  }
}

const Article = Loadable({
  loader: () => import(/* webpackChunkName: "Article" */ '../components/contentTypes/Article'),
  loading: Loading
})

const Page = Loadable({
  loader: () => import(/* webpackChunkName: "Page" */ '../components/contentTypes/Page'),
  loading: Loading,
  render (loaded, props) {
    let Component = WithSettings(loaded.default)
    return <Component {...props}/>
  }
})

export default [
  {
    path: `/:projectSlug/:env${getEnvironments()}/article/:articleSlug`,
    component: Article,
    exact: true
  },
  {
    path: `/:projectSlug/:env${getEnvironments()}/:menuSlug?/:pageSlug?`,
    component: Page
  }
]

WithSettings.js

export default (WrappedComponent: any) => {
  class WithSettings extends React.Component<WithSettingsProps, WithSettingsState> {
    static displayName = `WithSettings(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`

    state = {
      renderWidth: 1200
    }

    componentDidMount () {
      this.loadSettings({ match: { params: { projectSlug: '', env: '' } } })
      window.addEventListener('resize', this.onResize)
      this.onResize()
    }

    componentWillUnmount () {
      if (isClient) {
        window.removeEventListener('resize', this.onResize)
      }
    }

    componentDidUpdate (oldProps) {
      this.loadSettings(oldProps)
    }

    onResize = () => {
      this.setState({ renderWidth: this.getLayoutWidth() })
    }

    getLayoutWidth () {
      return (document.body && document.body.offsetWidth) || 0
    }

    loadSettings (oldProps) {
      const { settings, request, getNewSettings } = this.props
      const { projectSlug: oldProjectSlug, env: oldEnv } = oldProps.match.params
      const { projectSlug: newProjectSlug, env: newEnv } = this.props.match.params

      if (
        (
          oldProjectSlug !== newProjectSlug ||
          oldEnv !== newEnv
        ) ||
        (
          settings === undefined ||
          (request.networkStatus === 'ready')
        )
      ) {
        getNewSettings()
      }
    }

    render () {
      const { settings, request, history, location, match } = this.props
      const { renderWidth } = this.state

      if (!settings || !request || request.networkStatus === 'loading') {
        return <div />
      }

      if (request.networkStatus === 'failed') {
        return <ErrorBlock {...getErrorMessages(match.params, 'settings')[4044]} fullscreen match={match} />
      }

      return (
        <WrappedComponent
          settings={settings}
          settingsRequest={request}
          history={history}
          location={location}
          match={match}
          renderWidth={renderWidth}
        />
      )
    }
  }

  hoistNonReactStatic(WithSettings, WrappedComponent)

  return connect(mapStateToProps, mapDispatchToProps)(WithSettings)
}

我已经设法将其缩小到WithSettings我用来包装我的路由组件的 HOC。如果我不使用WithSettingsHOC（与 Article 路由一样），那么我的 SSR 输出将等待异步导入完成，并且服务器生成的 html 包含与路由相关的标记（好！）。如果我确实使用了 HOC（与 Page 路由一样），那么模块会立即解析，并且我的 SSR 输出变为，<div id="root"></div因为它不再等待动态导入在渲染之前完成。问题是：我在所有路由中都需要 WithSettings HOC，因为它从服务器获取我需要呈现应用程序的所需数据。

谁能告诉我如何使用 HOC并将React Loadable 的异步组件用于路由组件，以便它在服务器上工作？

4

1 回答 1

0

设法弄清楚了。

这是由于我的HOC。在 render 方法中，它会返回<div />whensettings或requestwhere undefined or request.networkStatusis loading。事实证明，这会导致服务器端渲染出错。删除此块足以使其工作。

于 2018-06-26T10:30:04.440 回答