From d92ab55d22ad55b3e00ef91800b2ec046bcb66f1 Mon Sep 17 00:00:00 2001
From: Dan Zajdband <dan.zajdband@gmail.com>
Date: Tue, 14 Mar 2017 18:06:34 -0500
Subject: [PATCH] Add/link replace (#1419)

* Using developit/unfetch as the Fetch API polyfill

* Added the replace prop into the Link component

* Added integration test for replace prop on Link component
---
 lib/link.js                                   |  6 +++-
 readme.md                                     | 10 ++++++
 test/integration/basic/pages/nav/index.js     |  1 +
 .../basic/test/client-navigation.js           | 34 +++++++++++++++++++
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/lib/link.js b/lib/link.js
index 79dc8b61d5..87c4c32f00 100644
--- a/lib/link.js
+++ b/lib/link.js
@@ -56,8 +56,12 @@ export default class Link extends Component {
       scroll = as.indexOf('#') < 0
     }
 
+    // replace state instead of push if prop is present
+    const { replace } = this.props
+    const changeMethod = replace ? 'replace' : 'push'
+
     // straight up redirect
-    Router.push(href, as)
+    Router[changeMethod](href, as)
       .then((success) => {
         if (!success) return
         if (scroll) window.scrollTo(0, 0)
diff --git a/readme.md b/readme.md
index 4127feaeda..21bfed1d31 100644
--- a/readme.md
+++ b/readme.md
@@ -292,6 +292,16 @@ export default () => (
 
 That will generate the URL string `/about?name=Zeit`, you can use every property as defined in the [Node.js URL module documentation](https://nodejs.org/api/url.html#url_url_strings_and_url_objects).
 
+The default behaviour for the `<Link>` component is to `push` a new url into the stack. You can use the `replace` prop to prevent adding a new entry.
+
+```jsx
+// pages/index.js
+import Link from 'next/link'
+export default () => (
+  <div>Click <Link href='/about' replace><a>here</a></Link> to read more</div>
+)
+```
+
 #### Imperatively
 
 <p><details>
diff --git a/test/integration/basic/pages/nav/index.js b/test/integration/basic/pages/nav/index.js
index 23cf4d23a8..fad7a15959 100644
--- a/test/integration/basic/pages/nav/index.js
+++ b/test/integration/basic/pages/nav/index.js
@@ -33,6 +33,7 @@ export default class extends Component {
         >
           <a id='query-string-link' style={linkStyle}>QueryString</a>
         </Link>
+        <Link href='/nav/about' replace><a id='about-replace-link' style={linkStyle}>Replace state</a></Link>
         <button
           onClick={() => this.visitQueryStringPage()}
           style={linkStyle}
diff --git a/test/integration/basic/test/client-navigation.js b/test/integration/basic/test/client-navigation.js
index 3022502f31..8807bdb0c2 100644
--- a/test/integration/basic/test/client-navigation.js
+++ b/test/integration/basic/test/client-navigation.js
@@ -263,6 +263,40 @@ export default (context, render) => {
           .toBe(`http://localhost:${context.appPort}/nav/querystring/10#10`)
         browser.close()
       })
+
+      it('should work with the "replace" prop', async () => {
+        const browser = await webdriver(context.appPort, '/nav')
+
+        let stackLength = await browser
+          .eval('window.history.length')
+
+        expect(stackLength).toBe(2)
+
+        // Navigation to /about using a replace link should maintain the url stack length
+        const text = await browser
+          .elementByCss('#about-replace-link').click()
+          .waitForElementByCss('.nav-about')
+          .elementByCss('p').text()
+
+        expect(text).toBe('This is the about page.')
+
+        stackLength = await browser
+          .eval('window.history.length')
+
+        expect(stackLength).toBe(2)
+
+        // Going back to the home with a regular link will augment the history count
+        await browser
+          .elementByCss('#home-link').click()
+          .waitForElementByCss('.nav-home')
+
+        stackLength = await browser
+          .eval('window.history.length')
+
+        expect(stackLength).toBe(3)
+
+        browser.close()
+      })
     })
   })
 }
-- 
GitLab