ReactJS react-router RoutingContext

Question

I'm building isomorphic application using ReactJS with react-router module for routing purposes on server side.

From its guide about using react-router on server:

(req, res) => {      
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    //...

    else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } 

    //...
  })
}

There is almost no information about this RoutingContext. So it's a bit unclear for me how it works. Is it some kind of replacement for Router component from react-router (used on top of other routes)?

Any help in understanding will be really appreciated!

score 3 · Answer 1 · answered Sep 15 '16 at 08:16

React router v4

in the new version (v4) it has been updated to createServerRenderContext. This works in very different way than previously but is much more concise as it also get rid of the need for using 'match'.

this code example is to be applied as express middleware:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerRouter/* , createServerRenderContext */ } from 'react-router';
// todo : remove line when this PR is live
// https://github.com/ReactTraining/react-router/pull/3820
import createServerRenderContext from 'react-router/createServerRenderContext';
import { makeRoutes } from '../../app/routes';

const createMarkup = (req, context) => renderToString(
  <ServerRouter location={req.url} context={context} >
    {makeRoutes()}
  </ServerRouter>
);

const setRouterContext = (req, res, next) => {
  const context = createServerRenderContext();
  const markup = createMarkup(req, context);
  const result = context.getResult();
  if (result.redirect) {
    res.redirect(301, result.redirect.pathname + result.redirect.search);
  } else {
    res.status(result.missed ? 404 : 200);
    res.routerContext = (result.missed) ? createMarkup(req, context) : markup;
    next();
  }
};

export default setRouterContext;

react-lego is an example app that shows how to do universal rendering using createServerRenderContext

It seems createServerRenderContext has actually been removed, and you just pass a plain object now. https://github.com/ReactTraining/react-router/issues/4471 — twiz, Nov 12 '17 at 15:00

score 2 · Answer 2 · answered Jan 13 '16 at 13:36

2

RoutingContext is an undocumented feature and will be replaced by RouterContext in v2.0.0. Its role is to synchronously render the route component.

It is simply a wrapper around your component which inject context properties such as history, location and params.

answered Jan 13 '16 at 13:36

Florent

12,310
10
49
58

1

I took it from here https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ServerRendering.md. Is there a sense to start using 2.0.0-rc4 or stay with 1.0.3 for now? – oleh.meleshko Jan 13 '16 at 13:39
1

You should definitely wait until 2.0.0 – Florent Jan 13 '16 at 13:40

score 0 · Answer 3 · answered Feb 27 '17 at 15:02

React router v4

in the new version (v4) it has been deleted to createServerRenderContext. This works in very different way than previously but is much more concise.

this little code example is to be applied.

import { StaticRouter } from'react-router-dom'

const context = {}

const mockup = renderToString(
  <Provider store = {store}>
     <IntlProvider locale = {locale} messages = {messages[locale]}>
      <StaticRouter location={request.url} context={context}>
        <ModuleReactWithPages />
      </StaticRouter>
     </IntlProvider>
    </Provider>
)

Now it's a layer of itself when it's a 404

ReactJS react-router RoutingContext

3 Answers3

React router v4