react-router-redux-render
Render isomorphic React apps and components in Node.
- Using React Router
- With Redux
Compatible with React Router 5.
An example implementation can be found in react-router-pagination-io.
Example
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
.
In this package
react-router-redux-render
exports three functions:
renderToString
renderToStaticMarkup
render
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.
Companion packages
@sequencemedia/react-router-redux-render
for React Router apps (with Redux)
@sequencemedia/react-router-render
for React Router apps (without Redux)
@sequencemedia/react-redux-render
for React Redux apps (without React Router)