Rewrite urls with hashes correct for static export. (#2242)

* Rewrite urls with hashes correct for static export.

* Fix some lint issues inside an example app.

examples/with-sw-precache/pages/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default class extends React.PureComponent {
-  componentDidMount() {
+  componentDidMount () {
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker
         .register('/service-worker.js')
@@ -9,11 +9,11 @@ export default class extends React.PureComponent {
           console.log('service worker registration successful')
         })
         .catch(err => {
-          console.warn('service worker registration failed')
+          console.warn('service worker registration failed', err.message)
         })
     }
   }
-  render() {
+  render () {
     return (
       <p>Check the console for the Service Worker registration status.</p>
     )

lib/router/index.js

@@ -87,21 +87,20 @@ export function _notifyBuildIdMismatch (nextRoute) {
 }
 
 export function _rewriteUrlForNextExport (url) {
-  // If there are no query strings
-  if (!/\?/.test(url)) {
-    return rewritePath(url)
+  const [, hash] = url.split('#')
+  url = url.replace(/#.*/, '')
+
+  let [path, qs] = url.split('?')
+  path = path.replace(/\/$/, '')
+
+  let newPath = `${path}/`
+  if (qs) {
+    newPath = `${newPath}?${qs}`
   }
 
-  const [path, qs] = url.split('?')
-
-  const newPath = rewritePath(path)
-  return `${newPath}?${qs}`
-
-  function rewritePath (path) {
-    // If ends with slash simply return that path
-    if (/\/$/.test(path)) {
-      return path
-    }
-    return `${path}/`
+  if (hash) {
+    newPath = `${newPath}#${hash}`
   }
+
+  return newPath
 }

test/integration/static/pages/dynamic.js

@@ -1,18 +1,33 @@
+/* global location */
+import React from 'react'
 import Link from 'next/link'
 
-const DynamicPage = ({ text }) => (
-  <div id='dynamic-page'>
-    <div>
-      <Link href='/'>
-        <a>Go Back</a>
-      </Link>
-    </div>
-    <p>{ text }</p>
-  </div>
-)
+export default class DynamicPage extends React.Component {
+  state = {}
 
-DynamicPage.getInitialProps = ({ query }) => {
-  return { text: query.text }
+  static getInitialProps ({ query }) {
+    return { text: query.text }
+  }
+
+  componentDidMount () {
+    const [, hash] = location.href.split('#')
+    this.setState({ hash })
+  }
+
+  render () {
+    const { text } = this.props
+    const { hash } = this.state
+
+    return (
+      <div id='dynamic-page'>
+        <div>
+          <Link href='/'>
+            <a>Go Back</a>
+          </Link>
+        </div>
+        <p>{ text }</p>
+        <div id='hash'>Hash: {hash}</div>
+      </div>
+    )
+  }
 }
-
-export default DynamicPage

test/integration/static/pages/index.js

@@ -39,6 +39,11 @@ export default () => (
       >
         <a id='dynamic-2'>Dynamic 2</a>
       </Link>
+      <Link
+        href='/dynamic?text=zeit+is+awesome#cool'
+      >
+        <a id='with-hash'>With Hash</a>
+      </Link>
       <Link href='/level1'>
         <a id='level1-home-page'>Level1 home page</a>
       </Link>

test/integration/static/test/browser.js

@@ -111,6 +111,30 @@ export default function (context) {
       browser.close()
     })
 
+    it('should render pages with url hash correctly', async () => {
+      const browser = await webdriver(context.port, '/')
+
+      // Check for the query string content
+      const text = await browser
+          .elementByCss('#with-hash').click()
+          .waitForElementByCss('#dynamic-page')
+          .elementByCss('#dynamic-page p').text()
+
+      expect(text).toBe('zeit is awesome')
+
+      // Check for the hash
+      while (true) {
+        const hashText = await browser
+          .elementByCss('#hash').text()
+
+        if (/cool/.test(hashText)) {
+          break
+        }
+      }
+
+      browser.close()
+    })
+
     describe('pages in the nested level: level1', () => {
       it('should render the home page', async () => {
         const browser = await webdriver(context.port, '/')