Add router

Author: coderitual

src/AboutPage.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => {
+  return <div>About Page</div>
+}

src/HomePage.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => {
+  return <div>Home Page</div>
+}

src/Navigation.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link } from '@reach/router'
+
+export default () => {
+  return (
+    <nav>
+      <Link>Home</Link>
+      <Link>About</Link>
+    </nav>
+  )
+}

src/index.js

@@ -1,9 +1,34 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { createGlobalStyle, ThemeProvider } from 'styled-components'
+import { Router } from '@reach/router'
+import Navigation from './Navigation'
+import HomePage from './HomePage'
+import AboutPage from './AboutPage'
 
-const title = 'Hello React UI Interactions'
+const theme = {
+  fontFamily: 'Helvetica Neue'
+}
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    font-family: ${props => props.theme.fontFamily};
+  }
+`
 
-ReactDOM.render(<div className='application'>{title}</div>, document.getElementById('app'))
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <React.Fragment>
+      <Navigation />
+      <Router>
+        <HomePage path='/' />
+        <AboutPage path='about' />
+      </Router>
+      <GlobalStyle />
+    </React.Fragment>
+  </ThemeProvider>,
+  document.getElementById('app')
+)
 
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {