Skip to content

Instantly share code, notes, and snippets.

@shethj
Last active September 1, 2023 16:57
Show Gist options
  • Save shethj/c9d52aa1fe4188c431336438305f8e32 to your computer and use it in GitHub Desktop.
Save shethj/c9d52aa1fe4188c431336438305f8e32 to your computer and use it in GitHub Desktop.

Sample overrides/app/routes.jsx to support hybrid deployment

This gist includes sample code which supports hybrid deployment in PWA Kit retail react app. This code mainly demonstrates overriding routes in a PWA Kit project generated using version 3.0.0 later with extensibility enabled.

/*
* Copyright (c) 2023, salesforce.com, inc.
* All rights reserved.
* SPDX-License-Identifier: BSD-3-Clause
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
import React, {useEffect} from 'react'
import {withRouter} from 'react-router-dom'
import loadable from '@loadable/component'
import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
// Components
import {Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
import {configureRoutes} from '@salesforce/retail-react-app/app/utils/routes-utils'
import {routes as _routes} from '@salesforce/retail-react-app/app/routes'
const fallback = <Skeleton height="75vh" width="100%" />
// Pages
const Home = loadable(() => import('@salesforce/retail-react-app/app/pages/home'), {fallback})
const PageNotFound = loadable(
() => import('@salesforce/retail-react-app/app/pages/page-not-found'),
{fallback}
)
// Remove handling SFRA routes on PWA Kit
const SFRARoutes = ['/cart', '/checkout', '*']
const routes = [
..._routes.filter((route) => !SFRARoutes.includes(route.path)),
{
path: '/home',
component: Home,
exact: true
},
{
path: '*',
component: withRouter((props) => {
const {location} = props
const urlParams = new URLSearchParams(location.search)
useEffect(() => {
const newURL = new URL(window.location)
if (!urlParams.has('redirected')) {
newURL.searchParams.append('redirected', '1')
window.location.href = newURL
}
}, [window.location.href])
if (urlParams.has('redirected')) {
return <PageNotFound {...props} />
}
return null
})
}
]
export default () => {
const config = getConfig()
return configureRoutes(routes, config, {
ignoredRoutes: ['/callback', '*']
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment