11

これは本質的にすべての私のコードです。Hapi を実行していて、React アプリケーションをサーバーでレンダリングするために react-loadable を使用しようとしています。

ここのコードに不足している多くの部分を追加しました。

const location = req.url.pathname
const context = {}
const modules = []

const Router = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <Route path="/me" component={Profile} />
    <Route component={NotFound} />
  </Switch>
)

const App = () => (
  <StaticRouter location={location} context={context}>
    <main>
      <Header />
      <Router />
      <Footer />
    </main>
  </StaticRouter>
)

const preloadables = [ Home, Login, Profile, NotFound ]
await Promise.all(preloadables.map(preloadable => preloadable.preload()))

const html = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <App/>
  </Loadable.Capture>
)

// render html

ブラウザでレンダリングされた React アプリを見ると、ページが正しくレンダリングされます。サーバーのキャッシュを無効にしない限り、「ルーター」の内容は表示されませんが。したがって、最初のリクエストはルーターをレンダリングせず、次のリクエストはレンダリングします。

サーバーでは、常にconsole.log('modules:', modules)戻りますmodules: []。キャッシュ関係なく。そのため、キャッシュを無効にしても、ルーターが動作していることを確認するためにページを 2 回更新しても、モジュールは空のままです。

npm run start:server
Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.

Please check the code for the LoadableComponent component.
modules []
modules []
modules []
modules []
modules []

それは機能しているはずなので、少し迷っています..すべて問題ないようです。

4

2 に答える 2

4

今日、何とか長い闘争の末、ようやく解決しました。

モジュールを取得する前に、ロード可能なコンポーネントを正しく作成する必要があります。公式ドキュメントはここで宣言します 

Loadable({
  loader: () => import('./Bar'),
  modules: ['./Bar'],
  webpack: () => [require.resolveWeak('./Bar')],
});

または、提供されている babel プラグインを使用できます。ただし、私の状況として、私は ts-node を使用しており、そのbabelプラグインを使用する運がないため、オプション1のみが利用可能です.

誰かが同様の問題に遭遇するためにここに書いてください。

（pslodable-componentはbabelプラグインにも依存します）

于 2019-03-01T08:21:06.563 に答える