Many developers who work with web applications have faced the challenge of managing state through the URL. This is often needed on different pages within the same context; for example, product and product detail pages, where the URL contains the product ID to be shown to the user.
http://localhost:3000/products
http://localhost:3000/products/123
However, Routed States affect not only the way we share data within our application. In the example above, SEO is also impacted; that is, search engines will recognize both your product listing page and the details of your products. Additionally, usability is improved, as this approach allows an advanced user to navigate through the system by knowing only the product IDs, while less experienced users can share the product with others simply by using a link.
Nevertheless, the example above is widely known, but there are other scenarios where the state of your application would be better reflected in the URL.
Imagine the following scenario: you are involved in a project where users are inexperienced and struggle with systems and their concepts. Because of this, new users need to be trained to use it. At a certain point, a new user was created with generic data and will need to update it with the help of an experienced user. The page for updating profile data is as follows:
Many developers, when creating this page, will choose to manage component states. The solution will look like the design shown above. However, this approach does not help the experienced user in assisting the novice user, as each interaction on this page will require further instructions. In this example, it will be necessary to specify the path http://localhost:3000/profile and the action of clicking on the "Security" menu to access the form for changing the password.
To address this issue, we should make the AccountForm and SecurityForm components accessible via the URL. This way, the experienced user only needs to provide the path http://localhost:3000/profile/security.
Top comments (1)
Good Article