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.
Last active
September 1, 2023 16:57
-
-
Save shethj/c9d52aa1fe4188c431336438305f8e32 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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