Build multi-page apps (Deprecated)

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


This page is deprecated. We now offer an easier way to create multipage applications using pages panel.
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.‌
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"