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.
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.
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.
