Adding Routes
In this section:
Time: 8 minutes
💪Goals:
  • Learn about the Router and Route elements
  • Understand Grid mode in Layout
  • Discover how to use the element menu in the Flow panel

What Is the Router Element

When we click different category links in the Nav Bar, we will want to navigate to different routes. That is to say, we want everythingco.uiflow.live to have completely different content from everythingco.uiflow.live/electronics.
In the former, we will want all of the products in the store to show while in the latter we will only want to display the products from the electronics category.
To add this effect, we will use the Router element.
The Router element allows you to create different views for different URL paths that may be hard coded to specific values or that can vary based on the parameters you give the URL. To learn more about Routes and the Router element please read more here.
In this section we will set up our router and create one hard-coded route, our home route, and one route that will use the category link in the Nav Bar as its URL path. We will only be dealing with the styles for each of these, and luckily for us, they look very similar. But we will talk more about how to get the logic to flow through the different routes in different ways in the second logic section coming up.

Adding a Router and Route

Let's drag and drop a Router element at our App level, right under the Nav Bar element.
When you double click the Router you will see that the Router element comes with a Route element nested inside of it by default.
This will be our home route, so let's name it home and indicate what the path is next to the label.
Now let's add the styling for elements presented on this page. We want the page to look like this:

Plan of Action

Let's think about what we will need to do to create this effect.
We will need to have one Container that has a Layout where the children elements will be placed in a grid with three columns, and then we will need to add a Container that will represent each of the items in the store.
Therefore, the first Container will be used only for the layout of the page as a whole and the Container we nest inside of that will have a white background and represent each item in our store.
This item Container will need a vertical Layout for its children and hold an image and some text elements nested inside of it for content.
Like the category links before, we don't need to worry about content yet. We will be pulling in the actual items along with their title, description, and images dynamically with an API later.

Content Wrapper

Let's start by adding a Container to be our content wrapper.
Let's double click the label in the right panel and type in the label Content Wrapper so we remember what this element is for.
Next, we will need to change the Size property to match the max width of our application 1120.
Finally, we can go to the Layout section and select Grid mode. We haven't used this mode before, but it allows us to force the children elements into a grid where we can determine the number of columns as well as the spacing between each column and row. You can learn more here.
In our case, we want three columns with an even spacing of 32 for both columns and rows.
We will also add 20 pixels of padding on all sides of this Content Wrapper element.
Great! Now we can move on to create the styling for each individual element. Remember, we'll be adding data dynamically so we only need to create one item.

Item Element

First let's drag and drop a Container into the Content Wrapper element.
Now let's change the label of this Container to be Item.
We want the children of this element to be aligned in columns, but we want them to be centered and justified to the top, so let's go to layout and select the center box in the top row.
We will also want to have uniform padding between each child element. Instead of adding padding to each child, we can add 16 to the Spacing property here.
To get some space between the edges of this box and the content inside of it, let's add a uniform padding of 34.
Finally, let's change the background color to white. You can do this by either typing in the hex value, rgba value, or the word white.
Now that we have our item element set up, we can add the elements that will be nested inside of it: an Image element for the picture of each item and two Text elements for the title and description.
Let's drill into the item and drag and drop these elements.
Now all we need to do is add some styling to these elements.
We want all of the images to be the same height so we will set a fixed height of 150 pixels.
Now all we need to do is add different font styles for the Title and Description.
First, let's label these Text elements so that one is called Title and the other Description.
Let's set the Font Styles of the Title to be the PT Serif family, size 24.
The family for the description should be Rubik with a size of 16 and a line height of 28.

Creating Custom Routes

Congratulations! You're done with the styling for the application. All we need to do now is copy this styling to a custom route and add in our logic.
Let's go back to our Router element and copy the Home route. You can do this by selecting the Home route and using a keyboard shortcut or by using the element menu in the top right of the Route element.
We will then paste the Route either by selecting the Router element and using a keyboard shortcut or by selecting the element menu in the top right of the Router element.
Now select one of them and change the label to Category (/:category) and navigate to the State tab of the righthand panel.
We will change the path to be /:category.
The colon indicates that it will be taking in a parameter, so this can be any word you want to use. It just needs to help you remember what you will be feeding the route.
Copy link
On this page
What Is the Router Element
Adding a Router and Route
Plan of Action
Content Wrapper
Item Element
Creating Custom Routes