Using route parameters
In this section, we will understand route parameters and how they are useful before using a route parameter in our app.
Understanding route parameters
A route parameter is a segment in the path that varies. The value of the variable segment is available to components so that they can render something conditionally.
In the following path, 1234 is the ID of a customer: /customers/1234/.
This can be defined as a route parameter in a route as follows:
{ path: '/customer/:id', element: <Customer /> }
A colon (:) followed by a name defines a route parameter. It is up to us to choose a parameter name that makes sense, so the :id segment in the path is the route parameter definition in the preceding route.
Multiple route parameters can be used in a path as follows:
{
path: '/customer/:customerId/tasks/:taskId',
element: <CustomerTask />,
}
Route parameter names obviously have to be unique...