What problem does this address?

The @wordpress/interactivity-router module implements a navigate() action that updates the HTML of router regions, i.e., elements with the data-wp-router-region directive.

However, right now, router regions nested inside an interactive element (i.e., with the data-wp-interactive directive) are skipped. When so, these regions, while still interactive, are not updated on navigation, and no markup changes would be made, including changes to the data inside data-wp-context directives.

There was a technical decision for this: the router module uses preact's render() to update router regions, and, for that function to work, it should be called at the root of a preact application. In our case, each top data-wp-interactive element is its own preact app, so a data-wp-router-region directive could only work in such an element (the root of the preact app).

However, we can give support for nested router regions. 🙂

What is your proposed solution?

We can actually implement a data-wp-router-region directive that changes the rendered output of the element. This is what router regions would require:

• Subscribing to navigations.
• Accessing the vDOM generated for the current page.
• Identifying the corresponding vDOM for the specific region.
• Rendering the vDOM synchronously along with other router regions.

There is a proof of concept here with a mocked-up navigate() action. It changes vDOM references in the state, so data-wp-router-region directives could subscribe to them.