diff --git a/lib/theme/Docs/index.js b/lib/theme/Docs/index.js
index 32670ad907..0be8baf454 100644
--- a/lib/theme/Docs/index.js
+++ b/lib/theme/Docs/index.js
@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React from 'react';
+import {Link} from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styles from './styles.css';
 import Layout from '@theme/Layout'; // eslint-disable-line
@@ -12,31 +13,23 @@ export default class Docs extends React.Component {
         <Helmet>
           <title>{(metadata && metadata.title) || siteConfig.title}</title>
         </Helmet>
-        <div className="docs-prevnext">
+        <div>
           {metadata.previous &&
             docsMetadata[metadata.previous] && (
-              <a
-                className="docs-prev button"
-                href={docsMetadata[metadata.previous].permalink}>
-                <span className="arrow-prev">← </span>
-                <span>{metadata.previous_title}</span>
-              </a>
+              <Link to={docsMetadata[metadata.previous].permalink}>
+                <span>← {metadata.previous_title}</span>
+              </Link>
             )}
         </div>
-        <div className="docs-prevnext">
+        <div>
           {metadata.next &&
             docsMetadata[metadata.next] && (
-              <a
-                className="docs-prev button"
-                href={docsMetadata[metadata.next].permalink}>
-                <span>{metadata.next_title}</span>
-                <span className="arrow-prev">→ </span>
-              </a>
+              <Link to={docsMetadata[metadata.next].permalink}>
+                <span>{metadata.next_title} →</span>
+              </Link>
             )}
         </div>
-        <div className={styles.mainContainer}>
-        {this.props.children}
-        </div>
+        <div className={styles.mainContainer}>{this.props.children}</div>
       </Layout>
     );
   }