同形反応 - チェックサムが一致しない

私はリアサイトをサーバーにレンダリングする方法を学んでいます。これまでのところ、私は非同期データとレンダリングを行うために管理しているが、私は（私は同型のアプリを持っているしたい場合エルゴ、）スクリプトが含まれている場合、私は問題を抱えている：同形反応 - チェックサムが一致しない

Warning: React attempted to reuse markup in a container but the checksum was invalid (...): 
(client) <!-- react-empty: 1 - 
(server) <div class="blah" dat

私はなぜこれを把握することはできません起こっている。次のように私のコードは次のとおりです。

サーバー

require('babel-register'); 

import express from 'express'; 
import path from 'path'; 

import React from 'react'; 
import { renderToString } from 'react-dom/server' 
import { match } from 'react-router' 
import { ReduxAsyncConnect, loadOnServer, reducer as reduxAsyncConnect } from 'redux-connect' 
import { Provider } from 'react-redux'; 

import routes from './app/routes'; 
import store from './app/store'; 

const app = express(); 
const port = 3100; 

const createPage = (html) => { 
    return `<!doctype html> 
    <html> 
     <head> 
     <title>123</title> 
     </head> 
     <body> 
     <div id="app">${html}</div> 

     <script src="/public/index.js"></script> 
     </body> 
    </html>` 
}; 

app.get('/', (req, res) => { 
    match({ routes, location: req.url }, (err, redirect, renderProps) => { 
    loadOnServer({ ...renderProps, store }).then(() => { 
     const appHTML = renderToString(
     <Provider store={store} key="provider"> 
      <ReduxAsyncConnect {...renderProps} /> 
     </Provider> 
    ); 

     const html = createPage(appHTML); 
     res.send(html); 
    }).catch((e) => { console.log(e); }) 
    }) 
}); 

app.use('/public', express.static(path.join(__dirname, 'public'))); 
app.use('/data', express.static(path.join(__dirname, 'data'))); 

app.listen(port); 
console.log(`localhost:${port}`);

路線：

import React from 'react'; 
import { Router, Route, browserHistory } from 'react-router'; 
import { ReduxAsyncConnect, asyncConnect, reducer as reduxAsyncConnect } from 'redux-connect' 
import App from './Components/App'; 
import { Provider } from 'react-redux'; 

import store from './store'; 

const routes = (
    <Provider store={store} key="provider"> 
    <Router render={(props) => <ReduxAsyncConnect {...props} />} history={browserHistory}> 
     <Route path="/" component={App}/> 
    </Router> 
    </Provider> 
); 

export default routes;

メイン（クライアント）

import React from 'react'; 
import { render } from 'react-dom'; 
import routes from './routes'; 
import { match } from 'react-router' 

match({ routes, location: '/' },() => { 
    render(routes, document.getElementById('app')) 
});

私は少しバグがどこかにあることを確信していますこのエラーが発生しますが、私はそれを見つけることができません。

出典

2016-08-31 Tomek Buszewski

私はクライアント側がアプリケーションを正しくレンダリングするための状態がないと思います。アプリの状態をクライアントに渡す必要があります。これは水分補給とも呼ばれます。

サーバー上で状態をシリアル化し、レンダリングされたhtmlでJSON文字列として送信することで、これを行うことができます。クライアント側では、シリアル化された状態を解析し、storeの作成時に初期状態として使用できます。これにより、サーバーと最初のクライアント側の両方のレンダリングで、同じマークアップを生成することができます - >チェックサムは等しくなります。

あなたは私が、私はそれほど明白なもの、おかげで欠落していた知っていたcreateStore http://redux.js.org/docs/api/createStore.html

出典

2016-08-31 17:39:50 Scarysize

に渡すことができる第二引数をチェック！ –

同形反応 - チェックサムが一致しない

答えて

関連する問題