Render isomorphic React apps and components in Node.
- Using React Router
- With Redux
For React Router 7.
An example implementation can be found in react-router-pagination-io.
In Express:
const express = require('express')
const app = express()
const port = 3000
const {
configureStore
} = require('./path/to/store')
const store = configureStore()
const routes = require('./path/to/routes')
const {
renderToString
} = require('react-router-redux-render')
app.get('/', ({ url: { path: pathname = '/' } }, res) => res.send(renderToString(store, routes, pathname)))
app.listen(port, () => console.log(`Express ${port}`))If React Router matches the pathname to a <Route /> then renderToString returns a string.
If renderToString encounters an error then it throwa a 500 Internal Server Error.
If renderToString cannot match the pathname to a <Route /> then it throws a 404 Not Found.
react-router-redux-render exports three functions:
renderToStringrenderToStaticMarkuprender
renderToString generates <html /> including the attributes that React uses in ReactDOM.hydrate(). It implements ReactDOMServer.renderToString().
renderToStaticMarkup doesn't include those attributes. It's useful for using React as a rendering engine for static pages. It implements ReactDOMServer.renderToStaticMarkup().
render executes renderToString but returns a Promise which resolves to a string.
-
@sequencemedia/react-router-redux-renderfor React Router apps (with Redux) -
@sequencemedia/react-router-renderfor React Router apps (without Redux) -
@sequencemedia/react-redux-renderfor React Redux apps (without React Router)