1
私は（を削除する場合にのみ、それは動作します私のサーバー、クライアント側で反応-ルータを - サーバーサイド・レンダリング・マッチ
app.get('*', function(req, res) {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
const body = renderToString(<RouterContext {...renderProps} />)
res.send(`
<!DOCTYPE html>
<html>
<head>
<link href="//cdn.muicss.com/mui-0.6.5/css/mui.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root">${body}</div>
<script defer src="assets/app.js"></script>
</body>
</html>
`)
})
})
そしてこの
import { Router, hashHistory, browserHistory, match } from 'react-router'
let history = browserHistory
//client side, will become app.js
match({ routes, location, history }, (error, redirectLocation, renderProps) => {
render(<Router {...renderProps} />, document.getElementById('root'))
})
に問題 これを持っていますlet history = browserHistory）、私のURLに/＃/ハッシュプレフィックスを追加します（これは起こりたくありません）。
私は（歴史= browserHistory）LETを残す
が、それは誤り警告をスロー：コンテナ内のマークアップを再利用しようと反応したが、チェックサムが無効でした。これは、一般に、サーバーレンダリングを使用していることを意味し、サーバー上で生成されたマークアップは、クライアントが期待していたものではありませんでした。どのマークの作業を補うために注入された新しいマークアップに反応しますが、サーバーレンダリングの利点の多くを失ってしまっています。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を把握してください： （クライアント）<！ - 反応 - 空：1 - （サーバー）<セクションデータ-reactro
エラーメッセージであることがhashHistoryで動作しますが、browserHistory