diff --git a/src/app/App.js b/src/app/App.js
index d746a45..788d512 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,16 +1,17 @@
 // @flow
 
 import React from "react";
-import {Router, browserHistory} from "react-router";
+import {Router} from "react-router";
+import type {History /* actually `any` */} from "history";
 
 import {createRoutes} from "./createRoutes";
 import {resolveTitleFromPath} from "./routeData";
 
-export default class App extends React.Component<{}> {
+export default class App extends React.Component<{|+history: History|}> {
   render() {
     return (
       <Router
-        history={browserHistory}
+        history={this.props.history}
         routes={createRoutes()}
         onUpdate={function() {
           const router = this;
diff --git a/src/app/index.js b/src/app/index.js
index 74237cf..4e70af6 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,14 +1,31 @@
 // @flow
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
+import createBrowserHistory from "history/lib/createBrowserHistory";
+
+import createRelativeHistory from "./createRelativeHistory";
+import normalize from "../util/pathNormalize";
 import App from "./App";
 
-const root = document.getElementById("root");
-if (root == null) {
+import "./index.css";
+
+const target = document.getElementById("root");
+if (target == null) {
   throw new Error("Unable to find root element!");
 }
-ReactDOM.hydrate(<App />, root);
+
+let initialRoot: string = target.dataset.initialRoot;
+if (initialRoot == null) {
+  console.error(
+    `Initial root unset (${initialRoot}): this should not happen! ` +
+      'Falling back to ".".'
+  );
+  initialRoot = ".";
+}
+const basename = normalize(`${window.location.pathname}/${initialRoot}/`);
+const history = createRelativeHistory(createBrowserHistory(), basename);
+
+ReactDOM.hydrate(<App history={history} />, target);
 
 // In Chrome, relative favicon URLs are recomputed at every pushState,
 // although other assets (like the `src` of an `img`) are not. We don't
diff --git a/src/app/server.js b/src/app/server.js
index 32e4e55..b556682 100644
--- a/src/app/server.js
+++ b/src/app/server.js
@@ -1,12 +1,14 @@
 // @flow
 
 import {StyleSheetServer} from "aphrodite/no-important";
+import createMemoryHistory from "history/lib/createMemoryHistory";
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 import {match, RouterContext} from "react-router";
 
 import Page from "./Page";
 import {Assets, rootFromPath} from "./assets";
+import createRelativeHistory from "./createRelativeHistory";
 import ExternalRedirect from "./ExternalRedirect";
 import {createRoutes} from "./createRoutes";
 import {resolveRouteFromPath, resolveTitleFromPath} from "./routeData";
@@ -19,6 +21,7 @@ export default function render(
   const path = locals.path;
   const root = rootFromPath(path);
   const assets = new Assets(root);
+  const history = createRelativeHistory(createMemoryHistory(path), "/");
   {
     const route = resolveRouteFromPath(path);
     if (route && route.contents.type === "EXTERNAL_REDIRECT") {
@@ -31,7 +34,7 @@ export default function render(
   function renderStandardRoute() {
     const bundlePath = locals.assets["main"];
     const routes = createRoutes();
-    match({routes, location: path}, (error, redirectLocation, renderProps) => {
+    match({history, routes}, (error, redirectLocation, renderProps) => {
       if (error) {
         callback(error);
       } else if (renderProps) {
@@ -53,7 +56,7 @@ export default function render(
           <style data-aphrodite>${css.content}</style>
           </head>
           <body style="overflow-y:scroll">
-          <div id="root">${html}</div>
+          <div id="root" data-initial-root="${root}">${html}</div>
           <script src="${assets.resolve(bundlePath)}"></script>
           </body>
           </html>
