Parameters in URLs

What are URL parameters?

Most applications require some usage of parameters in URLs. React Router also supports parameters by using colons ( : ), which you might be already familiar with:

<Route path="/users/:userid" component={UserProfile} />

We can easily restrict which parameters should be detected and can even provide further customization. For example, React Router allows the limitation of matching of routes by providing an asc (ascending) or desc (descending) keyword in regular expressions just after the parameter:

<Route path="/products/:order(asc|dec)" />

The above Route would only match if the URL provided was either /products/asc or /products/desc.

If we were to only allow numeric values in the :userid, we would define routes such as /users/:userid(\d*) or /users/:userid([0-9]*) to limit these.

Code example

Let’s see this in action: