I have a problem with blocking page changes in the application. The application is written in react and installed in liferay (CMS). It wants to keep the user on the payment intermediary selection screen. Unfortunately, the methods I know do not work properly. Blocking on the "beforeunload" event only blocks the closing of the page or its refresh (I'm only interested in closing the tab, but it is an additional condition). Blocking the website by react router doesn't work properly either. The prompt component works only within the scope of the added page, and no longer works in the navigation created on liferay. This is the same for useHistory (history.block('msg')), because it works just like the prompt component. I also tried to get this effect with other events, unfortunately to no avail. Does anyone have an idea to solve this problem? Thank you in advance.
I'm not aware about Liferay navigation behavior but I can see two resolutions:
you could go on using react router to block the transition to another route:
You could find a full example on the official docs (https://reactrouter.com/web/example/preventing-transitions).
<Prompt
when={isBlocking}
message={location =>
`Are you sure you want to go to ${location.pathname}`
}
/>
if there are parts of your application not handled by react-router you could rely on some event from history, like the one described here:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.
Related
So I am just wondering if there are any common practices or basic guidelines as to when you should create separate pages vs just updating the components on the current page when using React? I tried to look online and could not find anything.
There are some scenarios in which you need your data or some state persisted, just some update in the UI, like Atlassian Login page.
When you write your email, it changes the route and changes some css (changes password field display from none to block).
Or in Jira next gen, there are tasks, if you click on one of the tasks in a scrum board, the page component is the same, but it brings up a modal component showing up the details of that task.
Why different routes? cause you can share the link and whenever someone navigates to that route, it brings up the page with the same UI that you saw when you copied the link.
Otherwise it's a cleaner approach to handle navigation using separate pages. So it's totally up to you and the kind of UI/UX design.
I have a menu with links to different pages, but when I click on the link to the page I'm already on, literally nothing happens. I want the page to rerender as if the user clicked in from another page.
I've tried
navigate('/temp')
navigate(link, { replace: true })
but it's not working.
The short answer is that you can't refresh the same page using #reach/router (from React, and Gatsby extends from it). This is because the location is the same so for the internal routing, nothing changes hence the refresh is not forced.
The easiest way to achieve it is by using the old-fashioned window.location.reload(). This will refresh the full page, forcing the components to be rendered again.
You can follow this GitHub thread for further information. As you can see, it can be achieved by diving into history.pushState and in other tricky ways but it always ends in a headache, it's not recommended since it's not the purpose of the #reach/router if it thrives will be with multiple caveats.
For standard internal navigation between pages, use <Link> component rather than navigate.
I'm new to react, and I'm wondering if there is a way to add local state changes to the browser history to allow users to use back browser button to navigate back. I know this could cause problems sometimes, but I'll do it just in some specific and managed cases.
In my real application I'm using react-router v4 and experimented with history.push(location,state) but it didn't worked out
Here is an example application on codesandbox: https://codesandbox.io/s/9oz34n30j4
In this application I'd like the user to be able to browse back with the browser button between status changes.
Is that possible in any way?
Thanks
I'm currently facing an issue with Google Optimize, Application is build on Meteor React Redux, if there is any way to trigger Google Optimize experiment or any tag on click event in child or parent component, experiments are getting triggered on URL basis but, I'm not to add variation for click event at component level.
Suppose there is Cart button on clicking Cart button slider will open in same page, I have to apply Google Optimize experiment for the slider component.
Thanks in advance.
There are two key steps you need to take, to make this experiment work.
First, you have to set up the experiment triggers. By defeault, experiments start on page load, but this can be changed to so called custom events. Further details are available here.
Second, you need to dispatch this same command, when the relevant event (click on the Cart button in your case) has happened. More precisely, you need to send this event into the datalayer, using the following command.
dataLayer.push({'event': 'optimize.activate'});
You can customize this event name at the Optimize settings. In this case, the event in the datalayer call has to be aligned.
I've just implemented React Router 4 in my React/Redux app which was using multiple entry points up to this point.
I changed my code to have a single entry point and set up a catch-all route on the server side so that react router would handle requests on the client side.
Initially, everything seems to work OK but it takes a long long time before the right component is displayed. As soon as I click the link, I see the URL in the browser address bar change immediately but I have to wait sometimes more than 10-15 seconds before the right component is loaded.
I've also noticed that after a click or two, it stops working all together.
I don't get any errors and I put a break point on the server to see if I'm somehow hitting the backend when I click a link but looks like I'm not even going to the backend.
How can I debug/troubleshoot this? React Router is just a bunch of components and there's not much code to speak of that I can debug.
Has anyone experienced this issue? I'd appreciate any ideas you may have. Thanks.
The answer was in this post: React Router v4 not rendering components
Because I'm using Redux, I needed to use withRouter.