From 202c93c7c6d78cfd55b805c98c7cd155829a4beb Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@lab80.co>
Date: Mon, 15 May 2017 21:53:50 +1000
Subject: [PATCH] Updated to use react-router links

---
 components/Docs/Nav/index.js           |  3 ++-
 components/Footer/index.js             | 13 +++++++------
 components/Header/index.js             |  9 +++++----
 components/Homepage/MainLinks/index.js |  5 +++--
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/Docs/Nav/index.js b/components/Docs/Nav/index.js
index 8bf0cd86c27..ca73d07857b 100644
--- a/components/Docs/Nav/index.js
+++ b/components/Docs/Nav/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Link } from 'react-router';
 import './style.css';
 
 class Nav extends React.Component {
@@ -13,7 +14,7 @@ class Nav extends React.Component {
 
     return (
       <li key={item.id}>
-        <a className={cssClass} href={url}>{item.title}</a>
+        <Link className={cssClass} to={url}>{item.title}</Link>
       </li>
     );
   }
diff --git a/components/Footer/index.js b/components/Footer/index.js
index 6aa995e2ab4..cb5204d0411 100644
--- a/components/Footer/index.js
+++ b/components/Footer/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router';
 import slackIcon from './images/slack-icon.png';
 import githubIcon from './images/github-icon.png';
 import './style.css';
@@ -11,18 +12,18 @@ const Footer = () => (
           <center>
             Maintained by the
             {' '}
-            <a href="/docs/react-storybook/basics/community/">
+            <Link to="/docs/react-storybook/basics/community/">
               Storybook Community
-            </a>
+            </Link>
             .
           </center>
           <center>
-            <a href="https://storybooks-slackin.herokuapp.com/" target="_blank">
+            <Link to="https://storybooks-slackin.herokuapp.com/" target="_blank">
               <img src={slackIcon} alt="Storybook Slack" />
-            </a>
-            <a href="https://github.com/storybooks/storybook" target="_blank">
+            </Link>
+            <Link to="https://github.com/storybooks/storybook" target="_blank">
               <img src={githubIcon} alt="Storybook GitHub" style={{ padding: '7px' }} />
-            </a>
+            </Link>
           </center>
         </div>
       </div>
diff --git a/components/Header/index.js b/components/Header/index.js
index c8c27f6d98c..5470e08d963 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Link } from 'react-router';
 import './style.css';
 
 import storybookLogo from '../../design/homepage/storybook-logo.png';
@@ -16,9 +17,9 @@ class Header extends React.Component {
       const className = currentSection === section.id ? 'selected' : '';
 
       return (
-        <a className={className} key={section.href} href={section.href}>
+        <Link className={className} key={section.href} to={section.href}>
           {section.caption}
-        </a>
+        </Link>
       );
     });
   }
@@ -34,9 +35,9 @@ class Header extends React.Component {
       <div id="header" className="row">
         <div className="col-xs-12">
           <div id="header-title" className={titleClassname}>
-            <a href="/">
+            <Link to="/">
               <img className="sb-title" src={storybookLogo} alt="Storybook Logo" />
-            </a>
+            </Link>
           </div>
           <div id="header-links" className="pull-right">
             {this.renderSections()}
diff --git a/components/Homepage/MainLinks/index.js b/components/Homepage/MainLinks/index.js
index 8894e22646d..551883858f2 100644
--- a/components/Homepage/MainLinks/index.js
+++ b/components/Homepage/MainLinks/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router';
 import './style.css';
 
 const MainLinks = () => (
@@ -20,9 +21,9 @@ const MainLinks = () => (
           <div className="col-xs-6 read-docs">
             <h2>Read Docs</h2>
             <center>
-              <a href="/docs/react-storybook/basics/introduction/">
+              <Link to="/docs/react-storybook/basics/introduction/">
                 <div className="docs-img" />
-              </a>
+              </Link>
             </center>
           </div>
         </div>