Dynamic Routing with React
Phil Matranga | Web Development
Phil Matranga | Web Development
Most tunnels get you from point A to point B (which is like most applications in JS).
However, if we want to have cars and trucks exit from different areas, we’d create separate tunnels extending from point A. This time leading cars to Point B and Trucks to Point C.
In this way, dynamic routing lets you expand and add additional “tunnels” to your application flows. This means more efficiency (you don’t need to rebuild the tunnel entrance) and offers flexibility (if you want to add more tunnels down the road).
The following article will guide you through an overview of how to properly use dynamic routing and provide some helpful code examples.
Recently, we had a client who wanted to add two additional products to their application (which we developed).
It was a single page application that could, at the time, only support a single set of routes from a single entry point.
With the amount of products increasing, there was a question of how we would accommodate two completely new products in the same application. Each product had their own unique flow, which needed to run through the single application.
In order to pull this off, we decided to create a dynamic router, based off the react router to help support our multi-flow application. In order to better understand this process, we’ve outlined the different stages and aspects of developing a multi-route application.
We’ll focus on the type of dynamic routing that enables a router to react to information from an outside source – for example, information returned from an API or entered by a user.
In our case, we will react to information returned from an API. While business rules controlling the APIs may change, our routing logic would need little to no update. Although there is more to the configuration of our router up-front, it becomes easier to extend for larger applications.
Every single route in our application is defined as a JSON object. Shown below in Figure 1, is an example of how one of our routes is defined.
You can see several key pieces of information here:
Inside of the basic information, we define the path at which this route used, the component that is rendered at this route and a translation key. The translation key is used by i18n to serve the content for a component.
"userSelection":{
"basicInfo":{
"path":"/",
"component":"user-selection",
"translationKey":"user-selection"
},
"routing":{
"restrictRoute":false,
"ignoreTimeout":true
},
"analytics":{
"stepName":"Welcome"
}
}
Figure 1
Following the route definition, route behavior needs to be set. We needed to solve how to restrict access to a page in the user’s flow, until the user is meant to see it.
We decided the best solution was to add a simple flag here. By doing this, we were able to check to see if the user is allowed visit this route when the route’s component is mounting. If they can navigate to this route, we can send them on their desired path. Otherwise, we restrict this route and provide error messaging.
In addition, we wanted to be able to time users out on pages where they could be entering private information, to ensure users’ security on public computers.
We’ll focus on the type of dynamic routing that enables a router to react to information from an outside source – for example, information returned from an API or entered by a user.
Finally, we have a single piece of information that we needed for analytics.
This is where we defined the step name for a given route. The step name is a human readable name that is used for categorization and reporting purposes. We decided to place this information in the code as shown in Figure 2 below, since a step name should be tied to a route rather than a component. Other events are handled in our analytics reducer.
"analytics":{
"stepName":"Welcome"
}
After going through several iterations of routing, this provides us with the most flexibility. Not only can we update flows for a given product independently, but we can also define a new flow and products with relative ease by generating a JSON object.
The route shown in Figure 1 is a simple welcome page for our application. With this structure in place, we also have a convenient central place to define static information a route will need upon rendering.
By pulling together, our team discovered this approach for dynamic routing with React. This discovery was especially significant because we found a method that was flexible, organized, and scalable.
