Handle basename for urls that bypass react router

Author: vcua-mobify

packages/template-retail-react-app/app/components/_error/index.jsx

@@ -18,6 +18,7 @@ import {
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 
 import {BrandLogo, FileIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
 
 // <Error> is rendered when:
 //
@@ -53,7 +54,11 @@ const Error = (props) => {
                         // We need to use window.location.href here rather than history
                         // as the application is in an error state. We need to force a
                         // hard navigation to get back to the normal state.
-                        onClick={() => (window.location.href = '/')}
+                        // Include basename since this bypasses React Router
+                        onClick={() => {
+                            const envBasePath = getEnvBasePath()
+                            window.location.href = envBasePath ? `${envBasePath}/` : '/'
+                        }}
                     />
                 </Box>
             </Box>

packages/template-retail-react-app/app/utils/site-utils.js

@@ -6,6 +6,7 @@
  */
 
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
 
 /**
  * This functions takes an url and returns a site object,
@@ -101,7 +102,14 @@ export const getSiteByReference = (siteRef) => {
  * @returns {{siteRef: string, localeRef: string}} - site and locale reference (it could either be id or alias)
  */
 export const getParamsFromPath = (path) => {
-    const {pathname, search} = getPathnameAndSearch(path)
+    let {pathname, search} = getPathnameAndSearch(path)
+
+    // Remove the envBasePath from the pathname if present since
+    // it shifts the location of the site and locale in the pathname
+    const envBasePath = getEnvBasePath()
+    if (pathname.startsWith(envBasePath)) {
+        pathname = pathname.substring(envBasePath.length)
+    }
 
     const config = getConfig()
     const {pathMatcher, searchMatcherForSite, searchMatcherForLocale} = getConfigMatcher(config)

packages/template-retail-react-app/app/utils/url.js

@@ -13,6 +13,7 @@ import {
     getSiteByReference
 } from '@salesforce/retail-react-app/app/utils/site-utils'
 import {HOME_HREF, urlPartPositions} from '@salesforce/retail-react-app/app/constants'
+import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
 
 /**
  * Constructs an absolute URL from a given path and an optional application origin.
@@ -54,6 +55,8 @@ export const rebuildPathWithParams = (url, extraParams) => {
     const paramStr = params.toString().replace(/=&/g, '&').replace(/=$/, '')
 
     // Generate the newly updated url.
+    // Note: If a basename is set in React Router, it will be added to the url automatically
+    // so we do not need to use getEnvBasePath here.
     return `${pathname}${Array.from(paramStr).length > 0 ? `?${paramStr}` : ''}`
 }
 
@@ -121,6 +124,11 @@ export const searchUrlBuilder = (searchTerm) => '/search?q=' + encodeURIComponen
  * Returns a relative URL for a locale short code.
  * Based on your app configuration, this function will replace your current locale shortCode with a new one
  *
+ * Note: The URLs generated by this function are exptected to be used directly by
+ * window.location to force a hard refresh of the page.
+ * Because this bypasses React Router, we need to manually add the basename to the url, if one is
+ * defined in the app config.
+ * 
  * @param {String} shortCode - The locale short code.
  * @param {function(*, *, *, *=): string} - Generates a site URL from the provided path, site and locale.
  * @param {string[]} opts.disallowParams - URL parameters to remove
@@ -132,6 +140,12 @@ export const getPathWithLocale = (shortCode, buildUrl, opts = {}) => {
     let {siteRef, localeRef} = getParamsFromPath(`${location.pathname}${location.search}`)
     let {pathname, search} = location
 
+    // Remove basename from pathname if present before processing
+    const envBasePath = getEnvBasePath()
+    if (envBasePath && pathname.startsWith(envBasePath)) {
+        pathname = pathname.substring(envBasePath.length)
+    }
+
     // sanitize the site from current url if existing
     if (siteRef) {
         pathname = pathname.replace(`/${siteRef}`, '')
@@ -159,15 +173,21 @@ export const getPathWithLocale = (shortCode, buildUrl, opts = {}) => {
     const site = getSiteByReference(siteRef)
     const locale = getLocaleByReference(site, shortCode)
 
-    // rebuild the url with new locale,
+    // Build the path without basename
+    const url = `${pathname}${Array.from(queryString).length !== 0 ? `?${queryString}` : ''}`
+
+    // rebuild the url with new locale
     const newUrl = buildUrl(
-        `${pathname}${Array.from(queryString).length !== 0 ? `?${queryString}` : ''}`,
+        url,
         // By default, as for home page, when the values of site and locale belongs to the default site,
         // they will be not shown in the url just
         site.alias || site.id,
         locale?.alias || locale?.id
     )
-    return newUrl
+    
+    // Add basename for locale selection URLs since they bypass React Router
+    // (React Router handles basename for navigation via basename prop)
+    return envBasePath ? `${envBasePath}${newUrl}` : newUrl
 }
 
 /**
@@ -224,6 +244,9 @@ export const createUrlTemplate = (appConfig, siteRef, localeRef) => {
             queryLocale && locale && searchParams.append('locale', locale)
             queryString = `?${searchParams.toString()}`
         }
+
+        // Note: If a basename is set in React Router, it will be added to the url automatically
+        // so we do not need to add it here.
         return `${sitePath}${localePath}${path}${queryString}`
     }
 }