Skip to content

Integrate React Router

Antony Budianto edited this page Sep 14, 2018 · 8 revisions

This is how you integrate React Router into server side rendering:

// server/app.js

// you can use `async` function too
function handleUniversalRender(req, res) {
  const context = {};
  const stream = ReactDOMServer.renderToNodeStream(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    res.redirect(301, context.url);
    return;
  }

  return stream;
}

const app = createReactAppExpress({
  clientBuildPath,
  universalRender: handleUniversalRender
});

Note: Make sure App.js didn't render BrowserRouter, but put it on src/index.js or outer files

// src/index.js

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Please give your support by ⭐️ starring ⭐️ this repo, Thank you 🎉 🎉 🎉

Clone this wiki locally