Ich habe diese auf meinem Serverreagieren-Router - serverseitige Rendering Spiel
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>
`)
})
})
Und das auf der Client-Seite
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'))
})
das Problem Es funktioniert nur, wenn ich die entfernen (let history = browserHistory), aber es fügt das Präfix/#/Hash zu meiner URL hinzu (was ich nicht möchte).
Als ich die let (Geschichte = browserHistory) dort zu lassen, wirft er einen Fehler
Warnung: versucht React Markup in einem Behälter wieder zu verwenden, aber die Prüfsumme ungültig. Dies bedeutet in der Regel, dass Sie Server-Rendering verwenden und das auf dem Server generierte Markup nicht dem entspricht, was der Client erwartet hat. React injected new markup, um zu kompensieren, was funktioniert, aber Sie haben viele der Vorteile der Server-Rendering verloren. Finden Sie stattdessen heraus, warum das erstellte Markup auf dem Client oder Server anders ist: (Client) <! - reagieren leer: 1 - (Server) < Abschnitt Daten reactro
Die Fehlermeldung ist ziemlich klar, aber ich verstehe nicht, warum es mit dem hashHistory funktioniert aber nicht mit dem browserHistory