Multipage Apps- All About Routes

Modified on Wed, 22 Jun 2022 at 10:00 AM

Using the Router and Route Elements to create multiple pages in your application


In the Router section, you will find three components that will give your single page app routing. This will allow you to split your page up into logical sections with different URLs.


Adding Routes




To add routes, use the Router component to divide up the areas you would like to see in different pages. Then you can drop the Route component into the Router to create a specific path.




Naming Routes and Dynamic Routes




Use the label property to identify each route. The path property under "Custom" will allow you to create the URL path for this route. To create a path with a query string, add a colon before where the query string will occur.‌


Example:
Path results/:query



Go to Route


The Go to Route element will take you to the path indicated on the block it is connected with. If you would like to go to a custom route, you will need to use a string template to format the path with the query string input you are connecting it with. Here's an example:


As you can see, onEnter the Text Input element is calling Go to Route, but the path is determined by the getValue block coming from the Text Input.‌


To correctly format this input, we pass it through a String Template with with the formula "/results/${q}" and we have defined q in the config as the value from the Text Input.‌


This will take us to the Route with the path "/results/:query"

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article