Using router example improvements (vercel#1034)

Author: timneutkens

examples/using-router/components/Header.js

@@ -2,30 +2,30 @@ import Router from 'next/router'
 
 export default () => (
   <div>
-    <Link href='/'><a>Home</a></Link>
-    <Link href='/about'><a>About</a></Link>
-    <Link href='/error'><a>Error</a></Link>
+    <Link href='/'>Home</Link>
+    <Link href='/about'>About</Link>
+    <Link href='/error'>Error</Link>
   </div>
 )
 
 // typically you want to use `next/link` for this usecase
 // but this example shows how you can also access the router
 // and use it manually
-const Link = ({ children, href }) => (
-  <a
-    href='#'
-    style={styles.a}
-    onClick={(e) => {
-      e.preventDefault()
-      Router.push(href)
-    }}
-  >
-    { children }
-  </a>
-)
 
-const styles = {
-  a: {
-    marginRight: 10
+function onClickHandler (href) {
+  return (e) => {
+    e.preventDefault()
+    Router.push(href)
   }
 }
+
+const Link = ({ children, href }) => (
+  <a href='#' onClick={onClickHandler(href)}>
+    {children}
+    <style jsx>{`
+      a {
+        margin-right: 10px;
+      }
+    `}</style>
+  </a>
+)

examples/using-router/pages/error.js

@@ -1,16 +1,19 @@
-import React from 'react'
+import {Component} from 'react'
 import Header from '../components/Header'
 import Router from 'next/router'
 
-const ErrorPage = ({ aa }) => (
-  <div>
-    <Header />
-    <p>This should not be rendered via SSR</p>
-  </div>
-)
+export default class extends Component {
+  static getInitialProps () {
+    console.log(Router.pathname)
+    return {}
+  }
 
-ErrorPage.getInitialProps = () => {
-  console.log(Router.pathname)
+  render () {
+    return (
+      <div>
+        <Header />
+        <p>This should not be rendered via SSR</p>
+      </div>
+    )
+  }
 }
-
-export default ErrorPage