import React from "react";
import ReactDOMServer from "react-dom/server";
import { Route, StaticRouter } from "react-router";
import config from "config"; // Aliased through webpack
import paths from "../paths";
import BodyContent from "../BodyContent";

// TODO: what if a route isn't found?
module.exports = function renderPage(location, cb) {
  const allPages = paths.getAllPages(config);
  const page = paths.getPageForPath(location, allPages);

  const html = ReactDOMServer.renderToStaticMarkup(
    <StaticRouter location={location} context={{}}>
      <Route component={BodyContent(page, allPages)} />
    </StaticRouter>
  );

  cb(null, { html, page });
};

import React from "react";
import ReactDOMServer from "react-dom/server";
import { Route, StaticRouter } from "react-router";
import config from "config"; // Aliased through webpack
import paths from "../paths";
import BodyContent from "../BodyContent";

// TODO: what if a route isn't found?
module.exports = function renderPage(location, cb) {
  const allPages = paths.getAllPages(config);
  const page = paths.getPageForPath(location, allPages);

  (config.renderPage || renderDefault)(
    {
      location,
      content: BodyContent(page, allPages),
    },
    (err, html) => cb(err, { html, page })
  );
};

function renderDefault({ location, content }, cb) {
  cb(
    null,
    ReactDOMServer.renderToStaticMarkup(
      <StaticRouter location={location} context={{}}>
        <Route component={content} />
      </StaticRouter>
    )
  );
}

Add experimental `renderPage` hook for render customization