Server Side Rendering - renderToString returns empty html

Viewed 1489

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

0 Answers
Related