Skip to content

Conditional Route

In the Vyuh framework, routes are a great way to set up a single screen of content. But sometimes, you don’t want to always go to the same screen for every user or for every situation in your app. That is where conditional routing comes into play.

A conditional route leverages the Condition to branch between two or more routes. Having a conditional route means you can do things like showing a different screen for different types of subscribers. You could show a plain screen for the basic user, a more premium looking screen for the premium user, and a more luxurious one for the luxury user. These things can be pretty easily done using a singular condition that tells you the subscription status and using that to drive the conditional route.

The good part about a Conditional Route is that all of the configuration is done from the CMS, so you don’t really have to do anything in code to make it work.

Choosing a Condition

Since we are looking at an example of how to use a conditional route, let’s pick a condition which is fairly simple. In this case, a Boolean condition works very well; it’s already built into the system. Let’s use this condition to drive the two branches of the conditional route.

Using the Boolean condition for our Conditional Route

Notice that in the above picture, we have created a new route called Conditional Home with a path of /misc. We have also selected the Simple Boolean condition, which is built into the system.

Deciding the various branches

The next step is to set up the two branches of this particular condition. Since it’s a Boolean condition, we’ll obviously create a true route and a false route. We set up those two as cases, as you can see in the GIF below. The true route is pointing to the Miscellaneous Home, and the false route points to an Empty page.

Picking different routes for the "true" and "false" branches

Testing it in the App

Now for testing it in the app, make sure you are linking to this particular route through a URL and NOT by a Route reference. The framework uses the URL to decide whether there is a conditional route existing against the same path. If so, it will evaluate the conditional-route and pick the final route to render.

Since we have already set up the /misc route, let’s now load it up inside our app and see how it behaves when we switch the condition from true to false and back to true.

Summary

As you can tell from this article, there is no need to write any code to setup a Conditional Route. It is all done in the CMS with a simple configuration. You select the condition and setup the routes for its various cases. At runtime, depending on the value of the condition, the correct route will be rendered.