MENU

<StaticRouter>

This is a <Router> that never changes location.

This can be useful in server-side rendering scenarios when the user isn't clicking around, so the location never actually changes. Hence, the name: static. It's also useful in simple tests when you just need to plug in a location and make assertions on the render output.

<StaticRouter> only takes "basename", "children", and "location" now – the old "context" attribute, once used to smuggle a redirect URL or HTTP status code back out of the render, no longer exists. Here's a minimal server that just renders whatever page matches the request:

import http from "http";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router";
import App from "./App.js";

http.createServer((req, res) => {
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  res.write(html);
  res.end();
}).listen(3000);

import http from "http";
import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router";
import App from "./App.js";

http.createServer((req, res) => {
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  res.write(html);
  res.end();
}).listen(3000);

If you need to know the HTTP status code to send back (for a redirect or a 404), plain <StaticRouter> alone isn't enough anymore since it no longer exposes a context object. See Setting Status Codes with StaticRouter for the current, data-router-based way to do that. (Refer to the Server-side Rendering section for more general information.)