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>
  );
}