Dynamic Route Parameters

Video

Often in your interface you will want to create a route that can render content dynamically based on the parameters provided in the url.

Some common examples of this would be a blog page on a website.

Lets say you want a section of your website to look like this

  • /blogs
    A list of all the blogs on your site

  • /blogs/blog-1
    Should show blog 1

  • /blogs/blog-2
    Should show blog 2

    etc.

This is fairly standard and you can create a route for each of these blogs, however it would quickly become untenable and frustrating creating new routes in your interface each time you write a new blog.

The solution for this problem is to use Dynamic Route Parameters.

Creating a Dynamic Route

To create a dynamic route in the builder create a new route the same as normal, but in the URL path, add a : with a variable name to specify which section of the route should assume dynamic data.

For example in the scenario above we would create 2 routes.

  • /blogs
    A static route, with a listing of all blogs

  • /blogs/:slug
    A dynamic route where 'slug' would be a string provided in the url.

As you can see the second route has a dynamic variable in it's url :slug this means that route would match for both /blogs/blog-1 and /blogs/blog-2.

Automatic Reference Loading

If your route includes dynamic route parameters in it's url path, then Qik will assume that you want to load those items into the interface so you can render content from them. Qik will therefore load any ID's or Slugs that it has access to that match the value provided for that variable.

In the examples above, this means that if the user navigates to /blogs/blog-1 Qik will load the blog with the slug of blog-1 and add it to the current route's items .

Note: It's recommend that if you are building a public website to use the absolute slug meta.abs of an item as the dynamic variable value, this will provide better SEO results than simply providing an ID.

Creating Dynamic Parameters for static values

There may be cases where you want dynamic parameters in your URL to be available to your interface but they aren't ID's or slugs of content items, in this case you can specify a 'static variable' in your route's URL path by prefixing it with :: for example /christmascard/::name where you could visit /christmascard/sandy and Qik would not try and find an item with a slug of "sandy" the parameter would simply stay a string on the $sdk.app.route.params context object