Sync/async isomorphic render of React apps with React Router
npm install @sequencemedia/react-router-renderRender isomorphic _React_ apps and components in Node.
- Using _React Router_
_For React Router 7._
An example implementation of the companion package @sequencemedia/react-router-redux-render can be found in react-router-pagination-io.
In Express:
``javascript
const express = require('express')
const app = express()
const port = 3000
const routes = require('./path/to/routes')
const {
renderToString
} = require('react-router-render')
app.get('/', ({ url: { path: pathname = '/' } }, res) => res.send(renderToString(routes, pathname)))
app.listen(port, () => console.log(Express ${port}))`
If React Router matches the pathname to a then renderToString returns a string.
If renderToString encounters an error then it throws a 500 Internal Server Error.
If renderToString cannot match the pathname to a then it throws a 404 Not Found.
react-router-render exports three functions:
1. renderToStringrenderToStaticMarkup
2. render
3.
renderToString generates
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
1.
@sequencemedia/react-router-redux-render for React Router apps (with Redux)
2. @sequencemedia/react-redux-render for React Redux apps (without React Router)
2. @sequencemedia/react-render` for React apps (without React Router or Redux)