Introduce proper url routing for next-export which supports query strings.

This commit is contained in:
Arunoda Susiripala 2017-05-14 06:10:32 +05:30
parent 90991f176c
commit e78c2f44dc
3 changed files with 26 additions and 12 deletions

View file

@ -3,7 +3,7 @@
import { resolve, format, parse } from 'url' import { resolve, format, parse } from 'url'
import React, { Component, Children } from 'react' import React, { Component, Children } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Router from './router' import Router, { _rewriteUrlForNextExport } from './router'
import { warn, execOnce, getLocationOrigin } from './utils' import { warn, execOnce, getLocationOrigin } from './utils'
export default class Link extends Component { export default class Link extends Component {
@ -126,13 +126,11 @@ export default class Link extends Component {
// Add the ending slash to the paths. So, we can serve the // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly. // "<page>/index.html" directly.
const endsWithSlash = /\/$/.test(props.href)
if ( if (
typeof __NEXT_DATA__ !== 'undefined' && typeof __NEXT_DATA__ !== 'undefined' &&
__NEXT_DATA__.nextExport && __NEXT_DATA__.nextExport
!endsWithSlash
) { ) {
props.href = `${props.href}/` props.href = _rewriteUrlForNextExport(props.href)
} }
return React.cloneElement(child, props) return React.cloneElement(child, props)

View file

@ -85,3 +85,23 @@ export function _notifyBuildIdMismatch (nextRoute) {
window.location.href = nextRoute window.location.href = nextRoute
} }
} }
export function _rewriteUrlForNextExport (url) {
// If there are no query strings
if (!/\?/.test(url)) {
return rewritePath(url)
}
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}/`
}
}

View file

@ -5,7 +5,7 @@ import mitt from 'mitt'
import shallowEquals from '../shallow-equals' import shallowEquals from '../shallow-equals'
import PQueue from '../p-queue' import PQueue from '../p-queue'
import { loadGetInitialProps, getURL } from '../utils' import { loadGetInitialProps, getURL } from '../utils'
import { _notifyBuildIdMismatch } from './' import { _notifyBuildIdMismatch, _rewriteUrlForNextExport } from './'
export default class Router { export default class Router {
constructor (pathname, query, as, { pageLoader, Component, ErrorComponent, err } = {}) { constructor (pathname, query, as, { pageLoader, Component, ErrorComponent, err } = {}) {
@ -124,12 +124,8 @@ export default class Router {
// Add the ending slash to the paths. So, we can serve the // Add the ending slash to the paths. So, we can serve the
// "<page>/index.html" directly for the SSR page. // "<page>/index.html" directly for the SSR page.
const asEndsWithSlash = /\/$/.test(as) if (__NEXT_DATA__.nextExport) {
if ( as = _rewriteUrlForNextExport(as)
__NEXT_DATA__.nextExport &&
!asEndsWithSlash
) {
as = `${as}/`
} }
this.abortComponentLoad(as) this.abortComponentLoad(as)