I'm using Backbone with Marionette and I have one troublesome route that seems to be firing twice, with different route parameters. When you click back, it brings you back to the first firing of the route, not the original page. Using Backbone Debugger, I can see that I have 6 different routers and only one of them (highlighted) has the applicable route. So there's only one instance.
The route is being triggered by a plain old link. I'm not using navigate(). Here is the actual link HTML:
<a href="#device/3/hash/84855d0624dbeb7957cad7d09f7faca78166f033ab71e53aa6199f285d6d903f/incident/8IFVA" class="btn btn-actions action-details">
<span></span> App
</a>
When I click on that link, you can see the route being triggered with two different signatures:
I feel like I may be misunderstanding how Backbone routes work, why my route definition is matching with and without the incidentId. Here's the funny thing. If I take that link and just paste it into the browser, the route is only triggered once.
Generally when routes or events fire multiple times, it usually means that a view is not being properly disposed as you navigate back and forth.
Since you are sure that you aren't doing any hand-written navigation, it seems that this would be the case, especially if you only see this trigger once when you access the URL manually.
Without seeing your router or view code, it is hard to really give you a reliable solution. I would start putting breakpoints on that specific route handler and check the call stack of where it is being triggered.
Related
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.
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 developing an application where I need two kinds of navigation bars. Well, the only thing that is going to be changing are the tabs. I have tried implementing it multiple ways, but nothing worked correctly (The problem is in routing)
Since the navbar gets rendered at top level, it doesn't have access to useRouteMatch url (it does, but it's always /), so I cannot figure out how to route correctly.
Example route:
mypage.com/events/eventId/nested_route1
But when I try to navigate to a different tab, it doesn't work as intended. It either pushes the routes onto each other or just doesn't work in some other way.
But i need just mypage.com/events/eventId as the base url. The navigation used to be in a component with exactly this route, so it worked. But now I need to change the location as specified.
How could I do this? I really have no clue... I could split and pop the url to get rid of the url, but then there'd be a problem if I was on the url mypage.com/events/eventId since it would pop the id.
Hope everything's clear and there's a way to solve my problem.
I am trying to prevent the situation where code is injected multiple times when revisiting a previously viewed Route.
In a conventional site, the page is reloaded, and thus all the tags and their content need to be downloaded again, but in React, using react-router-dom, the history is changed without a page refresh. This leaves the previously injected code on the page.
I'm trying to gauge if the logic for restricting when a tags content should be injected into the React app belongs in:
GTM Trigger
GTM Tag
I cannot find any documentation for achieving this in triggers (as tag firing options->once per page doesn't work in this case), but achieving it in the tag code could be as simple as checking for the existence of an id wrapping the tag code, and preventing injection if it is already present.
Any suggestions?
When I am switching from one page that contains ion-tabs directive to another, ionic looses history. Do you know how to fix it or at least could you point me which part of code is responsible for it?
It's actually just an unfortunate part of the ionic design. Each navview has it own history stack, as does the tabs directive, so history is only tracked as long as you are in that context. Switching to a state in a new nav view will restart your history tracking. I have been working on a custom histry service that actually tracks your history globally, but I keep ending up with weird side effects from the tabs, kind of tricky.
Ionic tabs don't lose history unless you have messed up with. By history I mean if you are page 2 of tab 1 and clicked tab 2 and after sometime returned back, tab 1 will still be in page 2.
If you are confusing it with state, you will have to dive deep into ui-router.
Also $ionicViewService could be helpful for your purpose. But unfortunately no clear documentation is available for your use.