topic Re: When we change the route in our React single-page application, the pop-up does not appear. in APIs & Integrations

When we change the route in our React single-page application, the pop-up does not appear.

TZ15 — Tue, 25 Apr 2023 07:21:42 GMT

Hello,

We're encountering an issue with pop-up forms in our React project. Specifically, the pop-up form doesn't appear when we change the route dynamically. The pop-up form is supposed to appear when a certain event occurs on the page, and it works as expected when the page first loads. However, when the route is changed dynamically, the pop-up form doesn't appear at all.

We've searched for solutions in the developer community support, but the advice given is to reload the page, which isn't acceptable for our use case. We're wondering if anyone else has experienced a similar issue and if there are any alternative solutions we can try.

Thank you for your help!

Re: When we change the route in our React single-page application, the pop-up does not appear.

himanshurauthan — Tue, 25 Apr 2023 08:14:23 GMT

Hello @TZ15

It sounds like you're encountering a common issue in single-page applications where changing the route doesn't trigger a full page refresh. As a result, any event listeners or state changes that were set up on the initial page load might not be properly updated on subsequent route changes.

One potential solution to this problem is to listen for route changes using the React Router library and explicitly trigger the pop-up form to appear when the route changes. You can do this by using the useEffect hook to set up a listener for route changes, and then calling a function to show the pop-up form whenever the route changes.

Here's an example of what that might look like:

import { useEffect } from 'react'; import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); useEffect(() => { const unlisten = history.listen(() => { // Code to show pop-up form goes here }); return unlisten; }, [history]); // Rest of your component code goes here }

In this example, we're using the useHistory hook from React Router to get access to the history object, which allows us to listen for route changes. We then use the useEffect hook to set up a listener for those route changes, and return a cleanup function to remove the listener when the component unmounts.

Inside the listener function, you can add the code to show the pop-up form. You may need to adjust this code depending on how your pop-up form is implemented.

By using this approach, you should be able to ensure that the pop-up form appears whenever the route changes, without requiring a full page refresh.

Re: When we change the route in our React single-page application, the pop-up does not appear.

TZ15 — Fri, 28 Apr 2023 07:01:22 GMT

Hello,

Thank you @himanshurauthan for your answer. I apologize if I didn't explain our situation clearly enough. Our issue is specifically related to HubSpot Forms and CTAs pop-ups not appearing when the route is changed dynamically using history.

We've tried targeting the URL to ensure that the pop-ups appear on the correct pages, but this doesn't seem to be working when the route is changed dynamically.

do you have any suggestions for how to resolve it? Thank you in advance for your help!

Re: When we change the route in our React single-page application, the pop-up does not appear.

TZ15 — Fri, 28 Apr 2023 07:02:13 GMT

@himanshurauthan maybe you have another suggestions?

Re: When we change the route in our React single-page application, the pop-up does not appear.

baribeau — Wed, 15 Nov 2023 17:29:18 GMT

Links to similar/identical issues, with slightly different descriptions or angles of approach:

Re: When we change the route in our React single-page application, the pop-up does not appear.

baribeau — Thu, 23 May 2024 19:20:06 GMT

I've outlined a slightly-hacky solution for this problem using Google Tag Manager and Javascript, at https://community.hubspot.com/t5/APIs-Integrations/Force-CTA-Scripts-to-Run-on-History-Change-for-single-page/m-p/977800/highlight/true#M73696