I'm trying to render react application on server, but it seems that renderToString function doesn't render markup properly, when I do console.log(markup) I'm getting something like this:
<div data-reactroot="" data-reactid="1" data-react-checksum="-1424217736">
<!-- react-empty: 2 --><!-- react-empty: 3 --><!-- react-empty: 4 --><!-- react-empty: 5 --></div>
My code looks like this:
app.use('*', (req, res) => {
const context = {}
const store = configureStore()
const markup = renderToString(
<Provider store={store}>
<StaticRouter
location={req.url}
context={context}
>
<Routes/>
</StaticRouter>
</Provider>
)
console.log(markup)
if (context.url) {
// Somewhere a `<Redirect>` was rendered
redirect(301, context.url)
} else {
// we're good, send the response
res.send(`
<!doctype html>
<head>
<meta name="google-site-verification" content="P5pcBDBR0SrpH4kFMOp5Ush5JxDdG-3oPhjKO8Zf5WE" />
</head>
<body>
<div id="app">${markup}</div>
</body>
`)
}
})
I'm using React-Router v4