Query Parameters vs Route Parameters

-

 Route Parameters in "Dynamic Routes"

In this section, you learned about "dynamic routes" that utilize route parameters to extract dynamic values from the URL path.

For example:

router.get('/restaurants/:id', ...)

In this example, id is a route parameter that will hold different values when this URL / path is visited. For example, if a user enters /restaurants/r1, id will be equal to r1.

Route parameters are super useful as they allow us to use one single route to load different data based on the concrete route parameter value.

It is important to understand that the route parameter (:id in the above example) is a key part of the URL path. Just /restaurants would NOT be handled by the above route for example - because it's missing a value for the route parameter.

Query Parameters

We also learned about a concept called "query parameters" in this section.

It's easy to mix up "query parameters" and "route parameters" but these are fundamentally different concepts that solve different problems.

Where "route parameters" (see above) are NOT optional and a key part of the route definition (i.e. the load won't become active if no value is provided for the route parameter), "query parameters" are totally optional!

"Query parameters" are typically used to add extra information to a URL path.

For example:

/restaurants?order=asc

Here the "order" query parameter is added with a value of "asc" (query parameters are always separated from the "main path" via the ? symbol).


Out of the box, a query parameter does nothing! 


Visitors of a website can add as many of them as you want. You can add them via links or by submitting a form via a GET request as shown in the previous lecture (as a side-note: Instead of a GET form, we could've also constructed a link with a query parameter in the previous lecture - but I did want to introduce the idea of hidden input fields).

It's up to you, the developer, to add code that might handle such an optional query parameter to do some extra work on the server-side - for example, you could change the ordering of the items in an array (as shown in the last lecture), you could filter items or do anything else.

Route Parameters vs Query Parameters

As explained above, query parameters are optional and NOT a key part of the route path, route parameters on the other hand are!

Route parameters are used to determine which route should become active and then they can be parsed inside of the route to get the concrete value for the route parameter (e.g. a restaurant id).

Query parameters, on the other hand, are optional and you typically don't use them for determining which route should be executed - instead, they can be used for attaching extra information to a loaded route / URL.

Comments

Post a Comment

Popular posts from this blog

Arrays JavaScript Objects JavaScript

-
Image
  Arrays The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name and has members for performing common array operations. Description In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics: JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.) JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers (or their respective string form) as indexes. JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second is at index 1, and so on — and the last element is at the value of the array's length property minus 1. JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with...
Read more

ADVANCE FUNCTIONS JS

-
Image
 A function has access to the variable environment (VE) of excecution context it was created  Closure : VE attached to the function, exactly as it was at the time and place the function was created  A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. A closure is the closed-over variable environment of the execution context in which a function wascreated, even after that execution context is gone. A closure gives a function access to all the variables of its parent function , even after that parent function has returned. The function keeps a reference to its outer scope, which preserves the scope chain throught time. A closure makes sure that a function doesn't loose connection to variable that...
Read more