From 9056116c5b6e17ca941f2ff6eec9d5f843f9615a Mon Sep 17 00:00:00 2001
From: Guillermo Rauch <rauchg@gmail.com>
Date: Tue, 20 Dec 2016 12:44:23 -0800
Subject: [PATCH] Update Header.js

---
 .../with-prefetching/components/Header.js     | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/examples/with-prefetching/components/Header.js b/examples/with-prefetching/components/Header.js
index 264c7aeb..2317aee4 100644
--- a/examples/with-prefetching/components/Header.js
+++ b/examples/with-prefetching/components/Header.js
@@ -1,32 +1,30 @@
-import React from 'react'
 import Link, { prefetch } from 'next/prefetch'
-
-// Prefetch using the imperative API
-prefetch('/')
-
-const styles = {
-  a: {
-    marginRight: 10
-  }
-}
+import RegularLink from 'next/link'
 
 export default () => (
   <div>
     { /* Prefetch using the declarative API */ }
     <Link href='/'>
-      <a style={styles.a} >Home</a>
+      <a>Home</a>
     </Link>
 
     <Link href='/features'>
-      <a style={styles.a} >Features</a>
+      <a>Features</a>
     </Link>
 
-    <Link href='/about'>
-      <a style={styles.a} >About</a>
-    </Link>
+    { /* we imperatively prefetch on hover */ }
+    <RegularLink href='/about'>
+      <a onMouseEnter={ () => prefetch('/about') && console.log('prefetching /about!') }>About</a>
+    </RegularLink>
 
     <Link href='/contact' prefetch={false}>
-      <a style={styles.a} >Contact (<small>NO-PREFETCHING</small>)</a>
+      <a>Contact (<small>NO-PREFETCHING</small>)</a>
     </Link>
+
+    <style jsx>{`
+      a {
+        margin-right: 10px;
+      }
+    `}</style>
   </div>
 )