URL Parameters
URL parameters let you declare routes, views and data that depend on the current URL.
There are often times when you’ll need to map many similar URLs to the same route. For example, imagine that you’re building a list of quotes, where each quote’s URL follows a similar pattern:
/quotes/1
/quotes/2
/quotes/3
Here’s how you’d map all of these URLs (and any other URLs following the same pattern) to a single route:
mount({
'/quotes/:id': route({
view: <QuoteView />
})
})
See how the varying part of the URL has been replaced by a segment starting with a colon :
? This tells Navi that the segment is a URL parameter, and can be matched to any value.
Navi passes the current value of any URL Parameters to your route through the req.params
property — allowing you to fetch data for multiple URLs with a single route.
In fact, req.params
also contains any information extracted from the URL’s query string. For an example, notice how this demo extracts both an id
and a referrer
parameter from the URL /quotes/3?welcome=true
:
While URL parameters are a pretty standard featured for a JavaScript routing library, the combination of URL parameters and asynchronous content gives you a huge amount of declarative power. Just like controllers in an MVC framework, Navi’s routes let you implement business logic, throw errors, and choose views — all based on the request.
We’ll cover more of the controller-like abilities of Navi routes in the Context and Authentication guides. But in the meantime, let’s take a look at something a little simpler. I’ll see you in the next guide!