shelldandy · October 17, 2017 19:08 · Oct 17, 2017
diff --git a/App.js b/App.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { BrowserRouter as Router, Switch } from 'react-router-dom'
+import routes from './routes'
+import FancyRoute from './components/tools/FancyRoute'
+
+const App = props =>
+  <Router>
+    <Switch>
+      {routes.map((route, i) =>
+        <FancyRoute key={i} {...route} />
+      )}
+    </Switch>
+  </Router>
+
+export default App
diff --git a/FancyRoute.js b/FancyRoute.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import nprogress from 'nprogress'
+import 'nprogress/nprogress.css'
+import './FancyRoute.css'
+
+class FancyRoute extends React.Component {
+  componentWillMount () {
+    nprogress.start()
+  }
+
+  componentDidMount () {
+    nprogress.done()
+  }
+
+  render () {
+    return (
+      <Route {...this.props} />
+    )
+  }
+}
+
+export default FancyRoute
diff --git a/FancyRoute.scss b/FancyRoute.scss
@@ -0,0 +1,14 @@
+$progress-color: #bada55;
+
+#nprogress .bar {
+  background: $progress-color;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px $progress-color, 0 0 5px $progress-color;
+}
+
+#nprogress .spinner-icon {
+  border-top-color: $progress-color;
+  border-left-color: $progress-color;
+}
diff --git a/routes.js b/routes.js
@@ -0,0 +1,24 @@
+import Home from './views/Home'
+import About from './views/About'
+import Blog from './views/Blog'
+
+const routes = [
+  {
+    title: 'Home',
+    path: '/',
+    exact: true,
+    component: Home
+  },
+  {
+    title: 'Blog',
+    path: '/blog',
+    component: Blog
+  },
+  {
+    title: 'About',
+    path: '/about',
+    component: About
+  }
+]
+
+export default routes