Skip to main content

Handle Routing

As a rule, navigating based on user interaction should always be handled using HTML links and never with onClick handlers. In React, we use the react-router library that provides a Link component for this very purpose.

There are times when it is appropriate to use history.push to programmatically navigate.

  • Asynchronous navigation: when a page navigation needs to occur as part of an asyncronous code path
  • Business logic navigation: when a page navigation needs to occur as a result of business logic running
  • Navigation events without a page change: when a navigation event changes the URL in a way that solely augments the current page, e.g. list view filters

Angular Idiosyncracies​

Forcing a Digest Cycle​

If you are trying to navigate in rhapsody or change a page's query params, and there's a delay between the function execution and the actual visible changes being rendered. Add an event handler that fires document.body.dispatchEvent(new CustomEvent('requestDigest')).

This step is no longer necessary. The platform automatically triggers an Angular digest cycle when a non-Angular routing event occurs.

What problems are we solving?

  1. You are navigated to the location of the url on the anchor, but the onClick for the anchor is not fired (typically seen when mixpanel events don't get sent), OR
  2. The onClick for the anchor is fired, but you are not navigated to the url (you have to double or triple-click to navigate to the link).

NOTE: It was noticed when debugging this PR that the bug was much less common when dev tools were open.

What is the solution?

Add a data-angular-ignore attribute to the problematic anchor tag.

There is a particular event.preventDefault() within Angular that was preventing one or the other of the above mentioned events from being fired depending on the situation. This PR added a check for elements with the attribute data-angular-ignore to bypass the problematic event.preventDefault().