How We Saved Rank Math Redirections When the React Form Wouldn’t Register Changes

Updating redirect destinations in Rank Math SEO looks simple — open the edit form, change the destination URL, click Save. The problem is that Rank Math’s redirection editor is built in React, and React does not detect value changes made through standard DOM manipulation. The form submits the original value even when the input field visually shows the new one. Here is the approach that works reliably.

This technique is not specific to BlitzMetrics. It applies to any React-controlled form in WordPress — including the editing interfaces used in client sites built with Gutenberg, WooCommerce, or advanced custom field plugins. When BlitzMetrics set up redirections for a contractor’s financing page, the same React form behavior appeared and required the same native setter approach to update redirect rules programmatically.

The Problem with Standard Input Methods

When editing a redirect in Rank Math, the Destination URL field is a React-controlled input. React maintains its own internal state for the input value — separate from what the DOM shows. When you set input.value = 'new-url' directly in JavaScript, or use a browser automation tool to fill in the field, React does not detect the change. Its internal state still holds the original value.

The result: clicking “Update Redirection” submits the old destination URL, not the new one you typed or set. The redirect appears unchanged in the list after saving.

This also affects browser automation tools that use form_input or coordinate-based typing — they update the visible DOM but React’s state does not follow.

The Fix: Native React Input Value Setter

The solution is to bypass the standard DOM property setter and use the native getter/setter defined on HTMLInputElement.prototype, then dispatch an input event that React’s synthetic event system recognizes:

var input = document.querySelector('input[type="text"]'); // target the destination field
var nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
nativeSetter.call(input, 'https://blitzmetrics.com/your-destination-url/');
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));

This tells React that the input value changed through its own internal mechanism, which causes it to update its component state. The next time the form submits, React reads from its state and sends the new value.

After setting the value this way, clicking the “Update Redirection” button — triggered via JavaScript’s click() on the button[type="submit"] element — submits the form successfully.

Why the Nonce Matters

Rank Math’s redirect edit form URL contains a security nonce parameter. Nonces expire — typically after a set time window. If the nonce is stale, the AJAX save call returns 0 (failed) instead of a success response.

When working with redirect chains that require editing multiple entries in sequence, always navigate to a fresh redirections list page between sessions to get a current nonce. Do not reuse URLs bookmarked from a previous session.

Finding the Destination URL Input Reliably

On the redirect edit form, multiple text inputs exist (source URL fields, category fields, date fields). The most reliable way to target the destination input specifically is to select for the input whose current value contains the existing destination domain:

var inputs = document.querySelectorAll('input[type="text"]');
var destInput = null;
inputs.forEach(function(inp) {
  if (inp.value && inp.value.includes('blitzmetrics.com')) destInput = inp;
});

This targets by content rather than by position, which is more robust when the form layout shifts.

Critical Decisions Made

Abandon the AJAX approach for form submission: We initially tried calling Rank Math’s AJAX action (rank_math_save_redirection) directly. This returned 0 consistently, even with a valid nonce, because the AJAX handler requires parameters that match Rank Math’s internal data format exactly. The form submit approach is more reliable because it uses Rank Math’s own submission handler.

Verify the save in the list view, not just by checking the form: After clicking Update Redirection, we always navigate back to the redirections list and search for the source URL to confirm the “To” column shows the new destination. The form view can show stale data from React’s local state, while the list view always reflects what was actually saved to the database.

Use the native setter, not dispatchEvent alone: Dispatching an input event without first changing the underlying value does nothing — React reads the actual value when processing the event. The native setter must be called first to update the actual value, then the event is dispatched to notify React.

Effort and Cost Comparison

Guidelines Compliance Scorecard

This technique applies to any React-controlled form in WordPress — not just Rank Math. If you are building automations that interact with Gutenberg, WooCommerce settings panels, or any other React-based WordPress interface, the native property setter pattern is the correct approach for setting input values in a way the application state will recognize.

This fix was used as part of the Google Knowledge Panel redirect chain collapse documented in the companion meta article on collapsing 6-hop redirect chains. For the full context on why the redirect chain needed fixing in the first place, see how we diagnosed 2,500 BlitzMetrics pages not indexed by Google.