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 に /#/ ハッシュ プレフィックスが追加されます (これは望ましくありません)。

let (history = browserHistory) をそのままにしておくと、エラーがスローされます

警告: React はコンテナーでマークアップを再利用しようとしましたが、チェックサムが無効でした。これは通常、サーバー レンダリングを使用していて、サーバー上で生成されたマークアップがクライアントが予期していたものではないことを意味します。React は新しいマークアップを挿入してどちらが機能するかを補いましたが、サーバー レンダリングの多くの利点が失われました。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を調べてください: (client) < ! -- 反応空: 1 - (サーバー) < セクション data-reactro

エラーメッセージは非常に明確ですが、hashHistory では機能するのに browserHistory では失敗する理由がわかりません

4

1 に答える 1

0

バージョンの非互換性の問題

解決

{
  "history": "^2.1.2",
  "react-router": "~2.5.2"
}

リンク:

https://github.com/reactjs/react-router/issues/3003

于 2016-07-14T18:58:02.567 に答える