Automatically add basePath to links

panter · Aug 24, 2018 · 2ed928c · 2ed928c
1 parent b58bb88
commit 2ed928c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 8 deletions.
diff --git a/client/index.js b/client/index.js
@@ -163,7 +163,7 @@ async function doRender ({ App, Component, props, hash, err, emitter: emitterPro
   Component = Component || lastAppProps.Component
   props = props || lastAppProps.props
 
-  const appProps = { Component, hash, err, router, headManager, ...props }
+  const appProps = { Component, hash, err, router, headManager, basePath, ...props }
   // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
   lastAppProps = appProps
 

diff --git a/examples/with-zones/account/pages/_app.js b/examples/with-zones/account/pages/_app.js
@@ -16,9 +16,9 @@ export default class MyApp extends App {
   render () {
     const {Component, pageProps} = this.props
     return <Container>
-        <Link href="/account"><a>index</a></Link>
+        <Link href="/"><a>index</a></Link>
         <br />
-        <Link href="/account/password"><a>password</a></Link>
+        <Link href="/password"><a>password</a></Link>
       <Component {...pageProps} />
     </Container>
   }

diff --git a/lib/app.js b/lib/app.js
@@ -8,7 +8,8 @@ export default class App extends Component {
   static childContextTypes = {
     _containerProps: PropTypes.any,
     headManager: PropTypes.object,
-    router: PropTypes.object
+    router: PropTypes.object,
+    basePath: PropTypes.string,
   }
 
   static displayName = 'App'
@@ -19,10 +20,11 @@ export default class App extends Component {
   }
 
   getChildContext () {
-    const { headManager } = this.props
+    const { headManager, basePath } = this.props
     return {
       headManager,
       router: makePublicRouterInstance(this.props.router),
+      basePath,
       _containerProps: {...this.props}
     }
   }

diff --git a/lib/link.js b/lib/link.js
@@ -4,7 +4,7 @@ import { resolve, format, parse } from 'url'
 import React, { Component, Children } from 'react'
 import PropTypes from 'prop-types'
 import exact from 'prop-types-exact'
-import Router, { _rewriteUrlForNextExport } from './router'
+import Router, { _rewriteUrlForNextExport, addBasePath } from './router'
 import { warn, execOnce, getLocationOrigin } from './utils'
 
 function isLocal (href) {
@@ -57,6 +57,10 @@ class Link extends Component {
     ]).isRequired
   })
 
+  static contextTypes = {
+    basePath: PropTypes.string
+  }
+
   componentDidMount () {
     this.prefetch()
   }
@@ -70,14 +74,18 @@ class Link extends Component {
   // The function is memoized so that no extra lifecycles are needed
   // as per https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
   formatUrls = memoizedFormatUrl((href, asHref) => {
-    return {
+    const {basePath} = this.context
+    const formatedUrls = {
       href: href && typeof href === 'object'
         ? format(href)
         : href,
       as: asHref && typeof asHref === 'object'
         ? format(asHref)
         : asHref
     }
+    formatedUrls.href = addBasePath(formatedUrls.href, basePath)
+    formatedUrls.as = addBasePath(formatedUrls.as, basePath)
+    return formatedUrls
   })
 
   linkClicked = e => {

diff --git a/lib/router/index.js b/lib/router/index.js
@@ -171,3 +171,16 @@ export function removeBasePath (path = '', basePath = '') {
   let pathWithoutBase = path.replace(basePath, '')
   return pathWithoutBase === '' ? '/' : pathWithoutBase;
 }
+
+export function addBasePath (path, basePath = '') {
+  switch (path) {
+    case undefined:
+      return undefined
+
+    case '/':
+      return basePath === '' ? '/' : basePath
+
+    default:
+      return basePath + path
+  }
+}
diff --git a/server/render.js b/server/render.js
@@ -82,7 +82,7 @@ async function doRender (req, res, pathname, query, {
   App = App.default || App
   Document = Document.default || Document
   const asPath = req.url
-  const ctx = { err, req, res, pathname, query, asPath }
+  const ctx = { err, req, res, pathname, query, asPath, basePath }
   const router = new Router(pathname, query, asPath)
   const props = await loadGetInitialProps(App, {Component, router, ctx})
   const devFiles = buildManifest.devFiles
@@ -118,6 +118,7 @@ async function doRender (req, res, pathname, query, {
       <EnhancedApp {...{
         Component: EnhancedComponent,
         router,
+        basePath,
         ...props
       }} />
     </Loadable.Capture>