diff --git a/package.json b/package.json
index a8da7a72..b42b4ad1 100644
--- a/package.json
+++ b/package.json
@@ -18,15 +18,18 @@
   "devDependencies": {
     "@types/acorn": "^4.0.3",
     "@types/codemirror": "0.0.51",
+    "@types/history": "^4.6.2",
     "@types/node": "^8.9.4",
     "acorn": "^5.5.0",
     "codemirror": "^5.35.0",
     "he": "^1.1.1",
+    "history": "^4.7.2",
     "ncp": "^2.0.0",
     "node-fetch": "^1.7.3",
     "node-sass": "^4.9.0",
     "parcel-bundler": "^1.8.1",
     "parcel-plugin-markdown": "^0.3.1",
+    "path-to-regexp": "^2.2.1",
     "preact": "^8.2.7",
     "prettier": "^1.12.1",
     "puppeteer": "^0.13.0",
diff --git a/src/app.tsx b/src/app.tsx
new file mode 100644
index 00000000..952f1551
--- /dev/null
+++ b/src/app.tsx
@@ -0,0 +1,234 @@
+/*!
+   Copyright 2018 Propel http://propel.site/.  All rights reserved.
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+
+import { Component, ComponentConstructor, h } from "preact";
+import * as db from "./db";
+import { push, Router } from "./router";
+import * as types from "./types";
+import { equal } from "./util";
+
+import { ErrorPage } from "./components/error";
+import { GlobalHeader } from "./components/header";
+import { Home } from "./components/home";
+import { Loading } from "./components/loading";
+import { UserMenu } from "./components/menu";
+import { Notebook } from "./components/notebook";
+import { Profile } from "./components/profile";
+import { Recent } from "./components/recent";
+
+type Partial<T> = { [K in keyof T]?: T[K] };
+
+type ReadOnly<T> = { readonly [K in keyof T]: T[K] };
+
+interface PageProps {
+  path: string;
+  matches?: { [key: string]: string };
+  onReady?: () => void;
+}
+
+type BindProps<P> = {
+  [K in keyof P]?: (props: ReadOnly<BoundProps<P>>) => Promise<P[K]>
+};
+
+type BoundProps<P> = PageProps & BindProps<P>;
+
+interface BindStateNormal<P> {
+  data: { [K in keyof P]: P[K] };
+  error: null;
+}
+
+interface BindStateError {
+  data: null;
+  error: string;
+}
+
+type BindState<P> = BindStateNormal<P> | BindStateError;
+
+/**
+ * This react HOC can be used to bind result of some async
+ * methods to props of the given component (C).
+ * see: https://reactjs.org/docs/higher-order-components.html
+ *
+ *   const newComponent = bind(Component, {
+ *     async prop(props) {
+ *       const re = await someAsyncActions();
+ *       return re;
+ *     }
+ *   });
+ */
+function bind<P>(C: ComponentConstructor<P, {}>, bindProps: BindProps<P>) {
+  return class extends Component<BoundProps<P>, BindState<P>> {
+    state = { data: null, error: null };
+    prevMatches = null;
+    componentRef;
+
+    private onReady() {
+      if (this.props.onReady) this.props.onReady();
+    }
+
+    async loadData() {
+      if (equal(this.props.matches, this.prevMatches)) return;
+      this.prevMatches = this.props.matches;
+      const data: Partial<P> = {};
+      for (const key in bindProps) {
+        if (!bindProps[key]) continue;
+        try {
+          data[key] = await bindProps[key](this.props);
+        } catch (e) {
+          this.setState({ data: null, error: e.message });
+          return;
+        }
+      }
+      this.setState({ data: data as P, error: null });
+    }
+
+    render() {
+      this.loadData();
+      const { data, error } = this.state;
+      if (error) return <ErrorPage message={error} />;
+      if (!data) return <Loading />;
+      this.onReady();
+      return <C ref={r => (this.componentRef = r)} {...this.props} {...data} />;
+    }
+  };
+}
+
+// An anonymous notebook doc for when users aren't logged in
+export const anonDoc = {
+  anonymous: true,
+  cells: [],
+  created: new Date(),
+  owner: {
+    displayName: "Anonymous",
+    photoURL: require("./img/anon_profile.png"),
+    uid: ""
+  },
+  title: "Anonymous Notebook",
+  updated: new Date()
+};
+
+// TODO Move these components to ./pages.tsx.
+// tslint:disable:variable-name
+async function onNewNotebook() {
+  const nbId = await db.active.create();
+  // Redirect to new notebook.
+  push(`/notebook/${nbId}`);
+}
+
+async function onOpenNotebook(nbId: string) {
+  // Redirect to notebook.
+  push(`/notebook/${nbId}`);
+}
+
+export const RecentPage = bind(Recent, {
+  notebooks() {
+    return db.active.queryLatest();
+  },
+  async onNewNotebook() {
+    return () => onNewNotebook();
+  },
+  async onOpenNotebook() {
+    return (nbId: string) => onOpenNotebook(nbId);
+  }
+});
+
+export const ProfilePage = bind(Profile, {
+  notebooks(props) {
+    const uid = props.matches.userId;
+    return db.active.queryProfile(uid, 100);
+  },
+  async onNewNotebook() {
+    return () => onNewNotebook();
+  },
+  async onOpenNotebook() {
+    return (nbId: string) => onOpenNotebook(nbId);
+  }
+});
+
+export const NotebookPage = bind(Notebook, {
+  initialDoc(props) {
+    const nbId = props.matches.nbId;
+    return nbId === "anonymous"
+      ? Promise.resolve(anonDoc)
+      : db.active.getDoc(nbId);
+  },
+  save(props) {
+    const nbId = props.matches.nbId;
+    const cb = async doc => {
+      if (doc.anonymous) return;
+      if (!props.userInfo) return;
+      if (props.userInfo.uid !== doc.owner.uid) return;
+      try {
+        await db.active.updateDoc(nbId, doc);
+      } catch (e) {
+        // TODO
+        console.log(e);
+      }
+    };
+    return Promise.resolve(cb);
+  },
+  clone(props) {
+    const cb = async doc => {
+      const cloneId = await db.active.clone(doc);
+      // Redirect to new notebook.
+      push(`/notebook/${cloneId}`);
+    };
+    return Promise.resolve(cb);
+  }
+});
+
+export const HomePage = bind(Home as any, {});
+// tslint:enable:variable-name
+
+export interface AppState {
+  loadingAuth: boolean;
+  userInfo: types.UserInfo;
+}
+
+export class App extends Component<{}, AppState> {
+  state = {
+    loadingAuth: true,
+    userInfo: null
+  };
+
+  unsubscribe: db.UnsubscribeCb;
+  componentWillMount() {
+    this.unsubscribe = db.active.subscribeAuthChange(userInfo => {
+      this.setState({ loadingAuth: false, userInfo });
+    });
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
+
+  render() {
+    const { userInfo } = this.state;
+    return (
+      <div class="notebook">
+        <GlobalHeader subtitle="Notebook" subtitleLink="/notebook">
+          <UserMenu userInfo={userInfo} />
+        </GlobalHeader>
+        <Router>
+          <HomePage path="/" />
+          <RecentPage path="/notebook" userInfo={userInfo} />
+          <NotebookPage path="/notebook/:nbId" userInfo={userInfo} />
+          <ProfilePage path="/user/:userId" userInfo={userInfo} />
+          <ErrorPage message="The page you're looking for doesn't exist." />
+        </Router>
+      </div>
+    );
+  }
+}
diff --git a/src/components/error.tsx b/src/components/error.tsx
new file mode 100644
index 00000000..2f11a224
--- /dev/null
+++ b/src/components/error.tsx
@@ -0,0 +1,32 @@
+/*!
+   Copyright 2018 Propel http://propel.site/.  All rights reserved.
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+
+import { h } from "preact";
+
+export interface ErrorPageProps {
+  header?: string;
+  message: string;
+}
+
+export function ErrorPage(props: ErrorPageProps) {
+  return (
+    <div class="notification-screen">
+      <div class="notebook-container">
+        <p class="error-header">{ props.header || "Error" }</p>
+        <p>{ props.message }</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index b0efefd1..9e93f257 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -14,14 +14,15 @@
  */
 
 import { h } from "preact";
+import { Link } from "./link";
 
 export function Footer(): JSX.Element {
   return (
     <div class="footer">
-      <a href="/references">References</a>
-      <a href="/docs">Documentation</a>
-      <a href="https://github.com/propelml/propel">GitHub</a>
-      <a href="mailto:propelml@gmail.com">Contact</a>
+      <Link href="/references">References</Link>
+      <Link href="/docs">Documentation</Link>
+      <Link href="https://github.com/propelml/propel">GitHub</Link>
+      <Link href="mailto:propelml@gmail.com">Contact</Link>
     </div>
   );
 }
diff --git a/src/components/home.tsx b/src/components/home.tsx
index bbce7ad1..0b682095 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -13,14 +13,12 @@
    limitations under the License.
  */
 import { h } from "preact";
-import { GlobalHeader } from "./header";
 
 // tslint:disable-next-line:variable-name
 export const Home = props => {
   const md = require("../../README.md");
   return (
     <div class="index">
-      <GlobalHeader />
       <div class="intro flex-row">
         <div class="flex-cell">
           <div dangerouslySetInnerHTML={{ __html: md }} />
diff --git a/src/components/link.tsx b/src/components/link.tsx
new file mode 100644
index 00000000..fb66236f
--- /dev/null
+++ b/src/components/link.tsx
@@ -0,0 +1,28 @@
+/*!
+   Copyright 2018 Propel http://propel.site/.  All rights reserved.
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+
+import { h } from "preact";
+import { push } from "../router";
+
+export interface LinkProps extends JSX.HTMLAttributes {
+  href: string;
+}
+
+export function Link(props: LinkProps) {
+  const { href, children, ...otherProps } = props;
+  return (
+    <a onClick={() => push(href)} {...otherProps} > { children } </a>
+  );
+}
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 192aa58e..3a98f0f5 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -14,6 +14,7 @@
  */
 
 import { h } from "preact";
+import { Link } from "./link";
 
 export interface PropelLogoProps {
   subtitle?: string;
@@ -26,7 +27,7 @@ export function PropelLogo(props: PropelLogoProps): JSX.Element {
   if (props.subtitle) {
     Subtitle = (
       <h2>
-        <a href={props.subtitleLink || "/"}>{props.subtitle}</a>
+        <Link href={props.subtitleLink || "/"}>{props.subtitle}</Link>
       </h2>
     );
   }
@@ -45,7 +46,7 @@ export function PropelLogo(props: PropelLogoProps): JSX.Element {
       <div class="global-title">
         <div class="global-main-title">
           <h1>
-            <a href="/">Propel</a>
+            <Link href="/">Propel</Link>
           </h1>
         </div>
         <div class="global-sub-title">{Subtitle}</div>
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index fea805bc..7e9a39e4 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -26,6 +26,7 @@ export interface UserMenuProps {
 
 export function UserMenu(props): JSX.Element {
   if (props.userInfo) {
+    // TODO "Your notebooks" link
     return (
       <div class="dropdown">
         <Avatar size={32} userInfo={props.userInfo} />
diff --git a/src/components/notebook.tsx b/src/components/notebook.tsx
index 6ff7f0f1..ad03f405 100644
--- a/src/components/notebook.tsx
+++ b/src/components/notebook.tsx
@@ -35,7 +35,7 @@ export interface NotebookProps {
   save?: (doc: types.NotebookDoc) => void;
   initialDoc?: types.NotebookDoc;
   userInfo?: types.UserInfo; // Info about currently logged in user.
-  clone?: () => void;
+  clone?: (doc: types.NotebookDoc) => void;
 }
 
 export interface NotebookState {
@@ -178,12 +178,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
     this.active = cellId;
   }
 
-  onClone() {
-    if (this.props.clone) this.props.clone();
-  }
-
-  save() {
-    if (!this.props.save) return;
+  toDoc(): types.NotebookDoc {
     const cells = [];
     for (const key of this.state.order) {
       cells.push(this.state.codes.get(key));
@@ -199,7 +194,15 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
       title: this.state.title,
       updated: new Date()
     };
-    this.props.save(doc);
+    return doc;
+  }
+
+  onClone() {
+    if (this.props.clone) this.props.clone(this.toDoc());
+  }
+
+  save() {
+    if (this.props.save) this.props.save(this.toDoc());
   }
 
   handleTitleChange(event) {
diff --git a/src/components/recent.tsx b/src/components/recent.tsx
index 6dec05f7..0f27edaa 100644
--- a/src/components/recent.tsx
+++ b/src/components/recent.tsx
@@ -15,9 +15,9 @@
 
 import { Component, h } from "preact";
 import * as types from "../types";
+import { Link } from "./link";
 import { NotebookList } from "./list";
 import { NewNotebookButton } from "./new_notebook_button";
-import { profileLink } from "./user_title";
 
 export interface RecentProps {
   notebooks: types.NbInfo[];
@@ -52,7 +52,14 @@ export class Recent extends Component<RecentProps, RecentState> {
     if (this.props.userInfo) {
       profileLinkEl = (
         <div class="nb-listing-header">
-          <h2>{profileLink(this.props.userInfo, "Your Notebooks")}</h2>
+          <h2>
+            <Link
+              class="profile-link"
+              href={`/user/${this.props.userInfo.uid}`}
+            >
+              {this.props.userInfo.displayName}
+            </Link>
+          </h2>
         </div>
       );
     }
diff --git a/src/components/user_title.tsx b/src/components/user_title.tsx
index 28acf6fb..8f920976 100644
--- a/src/components/user_title.tsx
+++ b/src/components/user_title.tsx
@@ -16,28 +16,22 @@
 import { h } from "preact";
 import * as types from "../types";
 import { Avatar } from "./avatar";
-
-export function profileLink(
-  u: types.UserInfo,
-  text: string = null
-): JSX.Element {
-  const href = window.location.origin + "/notebook?profile=" + u.uid;
-  return (
-    <a class="profile-link" href={href}>
-      {text ? text : u.displayName}
-    </a>
-  );
-}
+import { Link } from "./link";
 
 export interface UserTitleProps {
   userInfo: types.UserInfo;
 }
 
 export function UserTitle(props: UserTitleProps): JSX.Element {
+  const href = "/user/" + props.userInfo.uid;
   return (
     <div class="nb-listing-header-title">
       <Avatar userInfo={props.userInfo} />
-      <h2>{profileLink(props.userInfo)}</h2>
+      <h2>
+        <Link class="profile-link" href={href} >
+          {props.userInfo.displayName}
+        </Link>
+      </h2>
     </div>
   );
 }
diff --git a/src/db.ts b/src/db.ts
index 851e4785..58df7aa5 100644
--- a/src/db.ts
+++ b/src/db.ts
@@ -102,7 +102,6 @@ class DatabaseFB implements Database {
       title: "",
       updated: firebase.firestore.FieldValue.serverTimestamp()
     };
-    console.log({ newDoc });
     const docRef = await nbCollection.add(newDoc);
     return docRef.id;
   }
@@ -123,7 +122,6 @@ class DatabaseFB implements Database {
       title: "",
       updated: firebase.firestore.FieldValue.serverTimestamp()
     };
-    console.log({ newDoc });
     const docRef = await nbCollection.add(newDoc);
     return docRef.id;
   }
diff --git a/src/main.tsx b/src/main.tsx
index e73e6903..79df70ca 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 import { h, render, rerender } from "preact";
+import { App } from "./app";
 import { drainExecuteQueue } from "./components/cell";
 import { enableFirebase } from "./db";
-import { Router } from "./pages";
 import { assert, IS_WEB } from "./util";
 
 assert(IS_WEB);
@@ -9,7 +9,7 @@ assert(IS_WEB);
 enableFirebase();
 
 window.addEventListener("load", async () => {
-  render(<Router />, document.body, document.body.children[0]);
+  render(<App />, document.body, document.body.children[0]);
   await drainExecuteQueue();
 
   // If we're in a testing environment...
diff --git a/src/nb_test.ts b/src/nb_test.ts
index 88858180..a7f2d4a9 100644
--- a/src/nb_test.ts
+++ b/src/nb_test.ts
@@ -1,24 +1,13 @@
 import { h, render, rerender } from "preact";
 import { testBrowser } from "../tools/tester";
+import { anonDoc, NotebookPage, ProfilePage } from "./app";
 import { cellExecuteQueue } from "./components/cell";
 import { Notebook } from "./components/notebook";
 import * as db from "./db";
-import * as nb from "./notebook_root";
 import { assert, assertEqual, createResolvable, delay } from "./util";
 
 const DOC_TITLE = "Anonymous Notebook";
 
-testBrowser(async function notebook_NotebookRoot() {
-  const mdb = db.enableMock();
-  resetPage();
-  const el = h(nb.NotebookRoot, {});
-  render(el, document.body);
-  await flush();
-  assertEqual(mdb.counts, { queryLatest: 1 });
-  const c = document.body.getElementsByTagName("div")[0];
-  assertEqual(c.className, "notebook");
-});
-
 testBrowser(async function notebook_Notebook() {
   const mdb = db.enableMock();
   await renderAnonNotebook();
@@ -140,7 +129,7 @@ testBrowser(async function notebook_profile() {
 });
 
 testBrowser(async function notebook_executeQueue() {
-  const { notebookRef } = await renderAnonNotebook();
+  const notebookRef = await renderAnonNotebook();
   // All the cells must be executed now.
   assertEqual(cellExecuteQueue.length, 0);
   const cell1 = await notebookRef.insertCell(2, "a = 0");
@@ -163,7 +152,7 @@ testBrowser(async function notebook_executeQueue() {
 
 testBrowser(async function notebook_urlImport() {
   db.enableMock();
-  const { notebookRef } = await renderAnonNotebook();
+  const notebookRef = await renderAnonNotebook();
   const testdataUrl = `${location.origin}/repo/src/testdata`;
 
   const cell1 = await notebookRef.insertCell(1, `
@@ -196,27 +185,32 @@ function resetPage() {
 function renderProfile(profileUid: string) {
   const promise = createResolvable();
   resetPage();
-  const el = h(nb.NotebookRoot, {
-    onReady: promise.resolve,
-    profileUid
+  const el = h(ProfilePage as any, {
+    matches: {
+      userId: profileUid
+    },
+    onReady: promise.resolve
   });
   render(el, document.body);
   return promise;
 }
 
-async function renderAnonNotebook(): Promise<nb.NotebookRoot> {
+async function renderAnonNotebook(): Promise<Notebook> {
   const promise = createResolvable();
   resetPage();
-  let notebookRoot: nb.NotebookRoot;
-  const el = h(nb.NotebookRoot, {
-    nbId: "default",
+  let notebookRoot;
+  const el = h(NotebookPage as any, {
+    matches: {
+      nbId: "default"
+    },
     onReady: promise.resolve,
-    ref: n => (notebookRoot = n)
+    ref: ref => (notebookRoot = ref)
   });
   render(el, document.body);
   await promise;
-  await notebookRoot.notebookRef.isReady;
-  return notebookRoot;
+  const notebookRef = notebookRoot.componentRef;
+  await notebookRef.isReady;
+  return notebookRef;
 }
 
 async function renderNotebook(): Promise<Notebook> {
@@ -224,16 +218,9 @@ async function renderNotebook(): Promise<Notebook> {
   let notebook: Notebook;
   const nb = h(Notebook as any, {
     initialDoc: {
-      anonymous: true,
+      ...anonDoc,
       cells: ["let a = 4", "let b = 5"],
-      created: new Date(),
-      owner: {
-        displayName: "Anonymous",
-        photoURL: require("./img/anon_profile.png"),
-        uid: ""
-      },
       title: DOC_TITLE,
-      updated: new Date()
     },
     ref: ref => (notebook = ref)
   });
diff --git a/src/notebook_root.tsx b/src/notebook_root.tsx
deleted file mode 100644
index fba9c6c1..00000000
--- a/src/notebook_root.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-/*!
-   Copyright 2018 Propel http://propel.site/.  All rights reserved.
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-   http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
- */
-
-// Propel Notebooks.
-// Note that this is rendered and executed server-side using JSDOM and then is
-// re-rendered client-side. The Propel code in the cells are executed
-// server-side so the results can be displayed even if javascript is disabled.
-
-import { Component, h } from "preact";
-import { normalizeCode } from "./components/common";
-import { GlobalHeader } from "./components/header";
-import { Loading } from "./components/loading";
-import { UserMenu } from "./components/menu";
-import { Notebook } from "./components/notebook";
-import { Profile } from "./components/profile";
-import { Recent } from "./components/recent";
-import * as db from "./db";
-import * as types from "./types";
-
-// An anonymous notebook doc for when users aren't logged in
-const anonDoc = {
-  anonymous: true,
-  cells: [],
-  created: new Date(),
-  owner: {
-    displayName: "Anonymous",
-    photoURL: require("./img/anon_profile.png"),
-    uid: ""
-  },
-  title: "Anonymous Notebook",
-  updated: new Date()
-};
-
-export interface FixedProps {
-  code: string;
-}
-
-// FixedCell is for non-executing notebook-lookalikes. Usually will be used for
-// non-javascript code samples.
-// TODO share more code with Cell.
-export class FixedCell extends Component<FixedProps, {}> {
-  render() {
-    // Render as a pre in case people don't have javascript turned on.
-    return (
-      <div class="notebook-cell">
-        <div class="input">
-          <pre>{normalizeCode(this.props.code)}</pre>
-        </div>
-      </div>
-    );
-  }
-}
-
-export interface NotebookRootProps {
-  userInfo?: types.UserInfo; // The current user who is logged in.
-  // If nbId is specified, it will be queried, and set in doc.
-  nbId?: string;
-  // If profileId is specified, it will be queried.
-  profileUid?: string;
-  // If neither nbId nor profileUid is specified, NotebookRoot will
-  // use the current URL's query string to search fo nbId and profile.
-  // If those are not found, NotebookRoot will query the most recent.
-  onReady: () => void;
-}
-
-export interface NotebookRootState {
-  // Same as in props, but after checking window.location.
-  nbId?: string;
-  profileUid?: string;
-
-  // If set a Notebook for this doc will be displayed.
-  doc?: types.NotebookDoc;
-  // If set the most-recent page will be displayed.
-  mostRecent?: types.NbInfo[];
-  // If set the profile page will be displayed.
-  profileLatest?: types.NbInfo[];
-
-  errorMsg?: string;
-}
-
-export class NotebookRoot extends Component<
-  NotebookRootProps,
-  NotebookRootState
-> {
-  notebookRef?: Notebook; // Hook for testing.
-  isCloningInProgress: boolean;
-
-  constructor(props) {
-    super(props);
-    let nbId;
-    if (this.props.nbId) {
-      nbId = this.props.nbId;
-    } else {
-      const matches = window.location.search.match(/nbId=(\w+)/);
-      nbId = matches ? matches[1] : null;
-    }
-    let profileUid;
-    if (this.props.profileUid) {
-      profileUid = this.props.profileUid;
-    } else {
-      const matches = window.location.search.match(/profile=(\w+)/);
-      profileUid = matches ? matches[1] : null;
-    }
-    this.state = { nbId, profileUid };
-  }
-
-  async componentWillMount() {
-    // Here is where we query firebase for all sorts of messages.
-    const { nbId, profileUid } = this.state;
-    try {
-      if (nbId) {
-        // nbId specified. Query the the notebook.
-        const doc = await (nbId === "anonymous"
-          ? Promise.resolve(anonDoc)
-          : db.active.getDoc(nbId));
-        this.setState({ doc });
-      } else if (profileUid) {
-        // profileUid specified. Query the profile.
-        const profileLatest = await db.active.queryProfile(profileUid, 100);
-        this.setState({ profileLatest });
-      } else {
-        // Neither specified. Show the most-recent.
-        // TODO potentially these two queries can be combined into one.
-        const mostRecent = await db.active.queryLatest();
-        this.setState({ mostRecent });
-      }
-    } catch (e) {
-      this.setState({ errorMsg: e.message });
-    }
-  }
-
-  async componentDidUpdate() {
-    // Call the onReady callback for testing.
-    if (
-      this.state.errorMsg ||
-      this.state.mostRecent ||
-      this.state.profileLatest ||
-      this.state.doc
-    ) {
-      if (this.props.onReady) this.props.onReady();
-    }
-  }
-
-  private async onNewNotebook() {
-    const nbId = await db.active.create();
-    window.location.href = nbUrl(nbId);
-  }
-
-  private async onOpenNotebook(nbId: string) {
-    window.location.href = nbUrl(nbId);
-  }
-
-  private async handleNotebookSave(doc: types.NotebookDoc) {
-    this.setState({ doc });
-    if (doc.anonymous) return;
-    if (!this.props.userInfo) return;
-    if (this.props.userInfo.uid !== doc.owner.uid) return;
-    try {
-      await db.active.updateDoc(this.state.nbId, doc);
-    } catch (e) {
-      // TODO
-      console.log(e);
-    }
-  }
-
-  async handleNotebookClone() {
-    if (this.isCloningInProgress) return;
-    this.isCloningInProgress = true;
-    const cloneId = await db.active.clone(this.state.doc);
-    // Redirect to new notebook.
-    window.location.href = nbUrl(cloneId);
-  }
-
-  render() {
-    let body;
-    if (this.state.errorMsg) {
-      body = (
-        <div class="notification-screen">
-          <div class="notebook-container">
-            <p class="error-header">Error</p>
-            <p>{this.state.errorMsg}</p>
-          </div>
-        </div>
-      );
-    } else if (this.state.profileLatest) {
-      body = (
-        <Profile
-          notebooks={this.state.profileLatest}
-          userInfo={this.props.userInfo}
-          onNewNotebook={this.onNewNotebook.bind(this)}
-          onOpenNotebook={this.onOpenNotebook.bind(this)}
-        />
-      );
-    } else if (this.state.doc) {
-      body = (
-        <Notebook
-          save={this.handleNotebookSave.bind(this)}
-          clone={this.handleNotebookClone.bind(this)}
-          initialDoc={this.state.doc}
-          ref={ref => (this.notebookRef = ref)}
-          userInfo={this.props.userInfo}
-        />
-      );
-    } else if (this.state.mostRecent) {
-      body = (
-        <Recent
-          notebooks={this.state.mostRecent}
-          userInfo={this.props.userInfo}
-          onNewNotebook={this.onNewNotebook.bind(this)}
-          onOpenNotebook={this.onOpenNotebook.bind(this)}
-        />
-      );
-    } else {
-      body = <Loading />;
-    }
-
-    return (
-      <div class="notebook">
-        <GlobalHeader subtitle="Notebook" subtitleLink="/notebook">
-          <UserMenu userInfo={this.props.userInfo} />
-        </GlobalHeader>
-        {body}
-      </div>
-    );
-  }
-}
-
-function nbUrl(nbId: string): string {
-  const u = window.location.origin + "/notebook?nbId=" + nbId;
-  return u;
-}
diff --git a/src/pages.tsx b/src/pages.tsx
index 7f9b9b6b..1c3283f3 100644
--- a/src/pages.tsx
+++ b/src/pages.tsx
@@ -15,22 +15,6 @@
 // tslint:disable:variable-name
 // This is the propelml.org website. It is used both server-side and
 // client-side for generating HTML.
-import { Component, h, render } from "preact";
-import { Home } from "./components/home";
-import * as db from "./db";
-import * as nb from "./notebook_root";
-import * as types from "./types";
-
-export interface Page {
-  title: string;
-  path: string;
-  root: any;
-  route: RegExp;
-}
-
-export function renderPage(p: Page): void {
-  render(h(p.root, null), document.body, document.body.children[0]);
-}
 
 export let firebaseUrls = [
   "https://www.gstatic.com/firebasejs/4.9.0/firebase.js",
@@ -67,62 +51,3 @@ export function getHTML(title, markup) {
   </body>
 </html>`;
 }
-
-export interface RouterState {
-  userInfo?: types.UserInfo;
-  loadingAuth: boolean;
-}
-
-// The root of all pages of the propel website.
-// Handles auth.
-export class Router extends Component<any, RouterState> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loadingAuth: true,
-      userInfo: null
-    };
-  }
-
-  unsubscribe: db.UnsubscribeCb;
-  componentWillMount() {
-    this.unsubscribe = db.active.subscribeAuthChange(userInfo => {
-      this.setState({ loadingAuth: false, userInfo });
-    });
-  }
-
-  componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  render() {
-    console.log("document.location.pathname", document.location.pathname);
-    const page = route(document.location.pathname);
-    return h(page.root, { userInfo: this.state.userInfo });
-  }
-}
-
-export function route(pathname: string): Page {
-  for (const page of pages) {
-    if (pathname.match(page.route)) {
-      return page;
-    }
-  }
-  // TODO 404 page
-  return null;
-}
-
-export const pages: Page[] = [
-  {
-    title: "Propel ML",
-    path: "index.html",
-    root: Home,
-    route: /^\/(index.html)?$/
-  },
-  {
-    title: "Propel Notebook",
-    path: "notebook.html",
-    root: nb.NotebookRoot,
-    route: /^\/notebook/
-  }
-];
diff --git a/src/router.tsx b/src/router.tsx
new file mode 100644
index 00000000..6aaa9dca
--- /dev/null
+++ b/src/router.tsx
@@ -0,0 +1,128 @@
+/*!
+   Copyright 2018 Propel http://propel.site/.  All rights reserved.
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+
+import { createHashHistory } from "history";
+import pathToRegexp from "path-to-regexp";
+import { cloneElement, Component, VNode } from "preact";
+
+let id = 0;
+const listeners = new Map<number, () => void>();
+const history = createHashHistory();
+const regexCache = new Map<string, RegExp>();
+const regexKeysCache = new Map<string, string[]>();
+
+export interface MatchedResult {
+  [key: string]: string;
+}
+
+export function match(pattern: string): false | MatchedResult {
+  const path = history.location.pathname;
+  let regex = regexCache.get(pattern);
+  let keys = regexKeysCache.get(pattern);
+  if (!regex) {
+    const mKeys = [];
+    regex = pathToRegexp(pattern, mKeys);
+    keys = mKeys.map(x => x.name);
+    regexCache.set(pattern, regex);
+    regexKeysCache.set(pattern, keys);
+  }
+  const re = regex.exec(path);
+  if (!re) return false;
+  const data = {};
+  for (const i in keys) {
+    if (!keys[i]) continue;
+    const key = keys[i];
+    data[key] = re[1 + Number(i)];
+  }
+  return data;
+}
+
+export interface RouterChildProps {
+  path?: string;
+}
+
+export type RouterChild = VNode<RouterChildProps>;
+
+export interface RouterProps {
+  children?: RouterChild[];
+}
+
+export interface RouterState {
+  active: number | string;
+  props: MatchedResult;
+}
+
+export class Router extends Component<RouterProps, RouterState> {
+  state = {
+    active: null,
+    props: null
+  };
+  id: number;
+
+  onLocationChange() {
+    const children: RouterChild[] = this.props.children;
+    for (const i in children) {
+      if (!children[i]) continue;
+      const child = children[i];
+      const attributes = child.attributes;
+      if (!attributes || !attributes.path) {
+        this.setState({ active: i, props: null });
+        return;
+      }
+      const props = match(attributes.path);
+      if (!props) continue;
+      this.setState({ active: i, props });
+      return;
+    }
+    this.setState({ active: null, props: null });
+  }
+
+  componentWillMount() {
+    this.id = id++;
+    listeners.set(this.id, this.onLocationChange.bind(this));
+    this.onLocationChange();
+  }
+
+  componentWillUnmount() {
+    listeners.delete(this.id);
+  }
+
+  componentWillReceiveProps() {
+    this.onLocationChange();
+  }
+
+  render() {
+    const { active, props } = this.state;
+    if (active === null) return null;
+    const activeEl = this.props.children[active];
+    const newProps = { ...activeEl.attributes, matches: props };
+    return cloneElement(activeEl, newProps);
+  }
+}
+
+export function push(url) {
+  history.push(url);
+}
+
+export function back() {
+  history.goBack();
+}
+
+history.listen(() => {
+  const listenerCbs = listeners.values();
+  for (const cb of listenerCbs) {
+    cb();
+  }
+});
diff --git a/src/router_test.tsx b/src/router_test.tsx
new file mode 100644
index 00000000..aec55caf
--- /dev/null
+++ b/src/router_test.tsx
@@ -0,0 +1,70 @@
+// Tests for the router component.
+import { h, render, rerender } from "preact";
+import { testBrowser } from "../tools/tester";
+import { push, Router } from "./router";
+import { assertEqual } from "./util";
+
+const matchedProps = new Map<string, any>();
+
+interface ComponentProps {
+  id: string;
+  matches?: any;
+  path?: string;
+}
+// tslint:disable-next-line:variable-name
+const Test = (props: ComponentProps) => {
+  matchedProps.set(props.id, props.matches);
+  return (
+    <div id={props.id} class="test" />
+  );
+};
+
+testBrowser(async function router() {
+  document.body.innerHTML = "";
+  render(
+    <Router>
+      <Test id="p1" path="/" />
+      <Test id="p2" path="/test" />
+      <Test id="p3" path="/page/:v" />
+      <Test id="p4" path="/test/:v" />
+      <Test id="404" />
+    </Router>
+    , document.body);
+  // .slice(1) is to remove # from the location.hash.
+  const path = () => document.location.hash.slice(1);
+  const activePage = () => {
+    const rendered = document.querySelectorAll(".test");
+    // We must render only one component at each moment.
+    assertEqual(rendered.length, 1);
+    return rendered[0].id;
+  };
+  // Rest path.
+  window.location.hash = "/";
+  await flush();
+  // Initial page.
+  assertEqual(path(), "/");
+  assertEqual(activePage(), "p1");
+  // 404 page.
+  push("/propel");
+  await flush();
+  assertEqual(path(), "/propel");
+  assertEqual(activePage(), "404");
+  // We must not render p2 in this case.
+  push("/test/12345");
+  await flush();
+  assertEqual(path(), "/test/12345");
+  assertEqual(activePage(), "p4");
+  assertEqual(matchedProps.get("p4").v, "12345");
+  // Go to a page with some argument.
+  push("/page/345");
+  await flush();
+  assertEqual(path(), "/page/345");
+  assertEqual(activePage(), "p3");
+  assertEqual(matchedProps.get("p3").v, "345");
+});
+
+// Call this to ensure that the DOM has been updated after events.
+function flush(): Promise<void> {
+  rerender();
+  return Promise.resolve();
+}
diff --git a/src/test.ts b/src/test.ts
index 64f7c855..6a1739c1 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -3,4 +3,5 @@ import "./fetch_test";
 import "./inspector_test";
 import "./nb_test";
 import "./nb_transpiler_test";
+import "./router_test";
 import "./rpc_test";
diff --git a/tsconfig.json b/tsconfig.json
index 552a2671..264c6fb7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     "preserveConstEnums": true,
     "pretty": true,
     "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
     "target": "es2017"
   },
   "exclude": ["build", "deps", "node_modules", "src/testdata/"]
diff --git a/yarn.lock b/yarn.lock
index 35950fec..2bcb851f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,6 +16,10 @@
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
+"@types/history@^4.6.2":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
+
 "@types/node@^8.9.4":
   version "8.10.12"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.12.tgz#dcb66f6de39074a296534bd1a256a3c6a1c8f5b5"
@@ -2450,6 +2454,16 @@ he@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+history@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2608,7 +2622,7 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -3137,7 +3151,7 @@ longest-streak@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e"
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -3907,6 +3921,10 @@ path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
 
+path-to-regexp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -4691,6 +4709,10 @@ resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
 
+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -5674,6 +5696,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vega-canvas@1, vega-canvas@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vega-canvas/-/vega-canvas-1.0.1.tgz#22cfa510af0cfbd920fc6af8b6111d3de5e63c44"
@@ -5930,6 +5956,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"