Navigation
Frigade supports the ability to route users to different pages in your application through the primaryButtonUri
and secondaryButtonUri
props defined in the Flow data.
By default, Frigade will use the window.location
object to navigate to the specified URI. This works well for some use cases, but it does cause a full page refresh which can be disruptive.
For optimal performance, we recommend overriding this behavior by providing a custom navigate
function to the FrigadeProvider
component where you can use your own router for a smoother experience.
Example:
import { FrigadeProvider } from '@frigade/react';
import { useRouter } from 'next/router';
const App = () => {
const router = useRouter();
return (
<FrigadeProvider
config={{
navigate: (url, target): void => {
if (target === "_blank") {
window.open(url, "_blank");
} else {
router.push(url);
}
},
}}
>
{children}
</FrigadeProvider>
);
}