index.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import RenderTo from "./render_to";
import Header from "./components/header";
import Nav from "./components/nav";

import Home from "./pages/home";
import AccountsReview from "./pages/accounts_review";
import AccountsReviewOptions from "./pages/accounts_review_options";
import AccountsAll from "./pages/accounts_all";

const routes = (
  <BrowserRouter>
    <div>
      <RenderTo element={() => document.getElementById("header")}>
        <Header />
      </RenderTo>
      <RenderTo element={() => document.getElementById("nav")}>
        <Nav />
      </RenderTo>
      <Switch>
        <Route path="/" exact>
          <RenderTo element={() => document.getElementById("main")}>
            <Home />
          </RenderTo>
        </Route>
        <Route path="/accounts/review">
          <RenderTo element={() => document.getElementById("main")}>
            <AccountsReview />
          </RenderTo>
        </Route>
        <Route path="/accounts/review_options">
          <RenderTo element={() => document.getElementById("main")}>
            <AccountsReviewOptions />
          </RenderTo>
        </Route>
        <Route path="/accounts">
          <RenderTo element={() => document.getElementById("main")}>
            <AccountsAll />
          </RenderTo>
        </Route>
      </Switch>
    </div>
  </BrowserRouter>
);

render(routes, document.getElementById("empty_app"));

render_to.js

import React, { Component } from "react";
import { createPortal } from "react-dom";

class RenderTo extends Component {
  render() {
    return createPortal(
      this.props.children,
      this.props.element(),
    );
  }
}

export default RenderTo;