Add page structure and universal routing

src/App.css

@@ -1,3 +0,0 @@
-.root {
-  color: red;
-}

src/App.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import css from './App.css';
-
-export default () => (
-  <div className={css.root}>hello, world</div>
-);

src/Routes.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Match, Miss, Redirect } from 'react-router';
+import * as pages from './pages';
+
+const RedirectTestPage = () => (
+  <Redirect to="/" />
+);
+
+const Routes = () => (
+  <div>
+    <Match exactly pattern="/" component={ pages.Home } />
+    <Match exactly pattern="/search" component={ pages.Search } />
+    <Match exactly pattern="/home" component={ RedirectTestPage } />
+    <Miss component={ pages.NotFound } />
+  </div>
+);
+
+export default Routes;

src/components/Page/Page.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default (props) => {
+  const { className, title, children } = props;
+  return (
+    <div className={ className }>
+      <h1>{ title }</h1>
+      { children }
+    </div>
+  );
+};

src/components/index.js

@@ -0,0 +1,5 @@
+import Page from './Page/Page';
+
+export {
+  Page
+};

src/index.js

@@ -1,18 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { renderToString } from 'react-dom/server';
-import App from './App';
+import { BrowserRouter, ServerRouter } from 'react-router';
+import Routes from './Routes';
 import './index.css';
 
 if (typeof window !== 'undefined') {
   ReactDOM.render(
-    <App />,
+    <BrowserRouter>
+      <Routes />
+    </BrowserRouter>,
     document.getElementById('root')
   );
 }
 
 export default function render(url, serverContext) {
-  // TODO: Use ServerRouter from react-router
-  console.log(`src/index.js: render() url: ${url}, serverContext: ${serverContext}`);
-  return renderToString(<App />);
+  return renderToString(
+    <ServerRouter location={ url } context={ serverContext }>
+      <Routes />
+    </ServerRouter>
+  );
 }

src/pages/Home.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../components';
+
+export default () => (
+  <Page title="Index page">
+    <Link to="/search">search page</Link>
+  </Page>
+);

src/pages/NotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../components';
+
+export default () => (
+  <Page title="Page not found">
+    <Link to="/">index page</Link>
+  </Page>
+);

src/pages/Search.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../components';
+
+export default () => (
+  <Page title="Search page">
+    <Link to="/">index page</Link><br />
+    <Link to="/home">home page</Link>
+  </Page>
+);

src/pages/index.js

@@ -0,0 +1,9 @@
+import Home from './Home';
+import Search from './Search';
+import NotFound from './NotFound';
+
+export {
+  Home,
+  Search,
+  NotFound,
+};