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

Author: impronunciable

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)

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>

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}

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()
+      })
     })
   })
 }