Decoupled navigation request handling
May 2023, by Maarten Nieber
Introduction
Route management
Processing navigation requests
Url effects
Conclusion
Introduction

Goals

In this post I will explain how url-changes can be requested in React components but handled outside of it.

Sample code

There is a sample application, annotated with comments, that explains the approach. Enter the following commands to run it:

git clone git@github.com:mnieber/blog-sample-apps.git
cd blog-sample-apps
yarn navHandler-sample
# Open the browser at http://localhost:3000

Rationale

I like to reflect the application state in the url, for two reasons:

  • it tells the user where they are in the application;
  • it allows the user to save the url and come back to the same page later.

To achieve this our application must do some kind of url management:

  • we must update the url in response to user actions. For example, when the user clicks on a folder in a map-view then we need to navigate to that folder;
  • we must update the url when the application state changes, and vice versa. For example, when the user renames a folder, then we need to update the url accordingly.

I tackle these challenges using two techniques: the navigation context and the url effect.

A navigation context is used to decouple components from url changes. In the given example, a MapTreeView can detect the mouse-click on a folder, but it cannot decide the url-change that must happen (because the same MapTreeView could be used on different pages). Instead, it will call a toFolder navigation function, that will handle the navigation request in a context-dependent way (this means that the url update will depend on where the requester component is located in the rendering tree, and on who is making the request).

A url effect is a render component that is inserted into the routing schema. Since a url effect is only rendered if it matches the current url, it knows which page the user is on. Therefore, it can synchronize the application state with the url in a context-dependent way.

In both cases, "context-dependent" is the key term, and we will come back to it.

Outlook

In the next section I will first explain how I do (ordinary) routing in my application. This is a preparation for the subsequent section in which I explain how url management is tackled using a navigation context and url effects. Then I will discuss how so-called url-effects can be used to synchronize the application state with the url and vice versa. In the final section I will discuss the pros and cons of my approach.

12345