How to do server rendering with react-router 1.0.0?

Question

I'm new in React and following a tutorial to build an isomorphic app. In the server side it use router.run() do the rendering thing, but it's removed in react-router 1.0.0.

Router.run(routes, req.url, Handler => {
    let content = React.renderToString(<Handler />);
    res.render('index', {
        content: content
    });
});

What the Update Guide said is

// v0.13.x
Router.run(routes, (Handler) => {
  render(<Handler/>, el);
})

// v1.0
render(<Router>{routes}</Router>, el)

But how can I do with the server rendering?

knowbody · Accepted Answer · 2015-10-27 22:03:12Z

1

Example:

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'

serve((req, res) => {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } else {
      res.status(404).send('Not found')
    }
  })
})

More can be found in the docs.

answered Oct 27, 2015 at 22:03

knowbody

8,2966 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brick Yang Over a year ago

Thx. But when I run these codes, the shell report an error about: renderToString(<RoutingContext, SyntaxError: Unexpected token <. How could I fix this?

Collectives™ on Stack Overflow

How to do server rendering with react-router 1.0.0?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related