react-hot-loader
クライアントjsを適切にバンドルし、変更をブラウザにプッシュしてそこに適用するようにセットアップできました([react-router] You cannot change <Router routes>; it will be ignored
警告を除く)。webpack と hot を処理するkoa
、 、 でkoa-webpack-dev-middleware
独自のサーバーを使用しています。koa-webpack-hot-middleware
また、このコードを使用してアプリのサーバー レンダリングも処理します
export default function *renderReact() {
const history = createMemoryHistory();
const store = makeStore(history);
const [redirectLocation, renderProps] = yield match.bind(null, { routes, location: this.url, history });
if (redirectLocation) {
return this.redirect(redirectLocation.pathname + redirectLocation.search)
}
if (renderProps == null) {
return this.throw(404, 'Not found')
}
const rootElement = (
<Provider store={store} key="provider">
<RouterContext {...renderProps} />
</Provider>
);
this.body = renderApp({
html: yield store.renderToString(ReactDOMServer, rootElement),
state: JSON.stringify(store.getState())
});
}
問題は私のサーバー側のコードにあります:hot
クライアントコードに対してのみ機能し、その場で変更を更新しますが、私のサーバーコードは変更時に更新されません.その後、新しいクライアント コードで更新されます。問題は、ホットWarning: React attempted to reuse markup in a container but the checksum was invalid...
ロードを中断するため、アプリを再起動しないサーバー上のサーバーレンダリング部分に関連するコード変更を処理する方法です。