CRA Universal

CRA Universal

  • Docs
  • API
  • Help
  • Blog

›Integration

Introduction

  • Getting started

Guides

  • Deployment
  • Customization
  • Code Splitting
  • Prefetching

Integration

  • React Router
  • Redux
  • TypeScript

React Router

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 el = (
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

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

  return el;
}

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')
);
← PrefetchingRedux →
CRA Universal
Docs
Getting StartedDeployment GuideAPI Reference
Community
Stack OverflowSpectrumTwitter
More
BlogGitHubStar
Copyright © 2020 Antony Budianto