So far, all the routes we’ve covered have been static, which means they match a single unique path. This works for certain types of routes, but not all.
For example, imagine in a tech news site where every article is accessible at the path '/articles/' + someTitle
where someTitle
is different for each article. Specifying a unique route for every article would not only be verbose and time-consuming, it would require an impractical amount of maintenance should the path structure ever change.
Instead, we would rather express the pattern at a high level with a single route that can match any path of the form '/articles/' + someTitle
and still know which article to render. React Router allows us to do this by using URL parameters to create dynamic routes.
URL parameters are dynamic segments of a URL that act as placeholders for more specific resources the URL is meant to display. They appear in a dynamic route as a colon (:
) followed by a variable name, like so:
<Route path='/articles/:title'> <Article /> </Route>
Let’s break down this short, yet powerful demonstration of URL parameters:
- In this example, the path
'/articles/:title'
contains the URL parameter:title
. - This means that when the user navigates to pages such as
'/articles/what-is-react'
or'/articles/html-and-css'
, the<Article />
component will render. - When the
Article
component is rendered in this way, it can access the actual value of that:title
URL parameter (what-is-react
orhtml-and-css
) to determine which article to display (more on this in the next exercise).
A single route can even have multiple parameters (eg. '/articles/:title/comments/:commentId'
) or none (eg. '/articles'
).
To make a URL parameter optional, you can append a '?'
to the end of the URL parameter’s name (eg. '/articles/:title?'
). In this case, the child component of the Route
will render when the URL matches either /articles/what-is-react
or just /articles
.
Instructions
Task 1
Navigate to App.js. Within the <main>
section, add a dynamic route with a URL parameter that renders the Article
component whenever the URL path matches paths such as '/articles/objects'
or '/articles/browser-compatibility'
.
Name the URL parameter in the route’s path
prop :title
.
To confirm that your code works, navigate to http://localhost:3000/articles/objects or try clicking on one of the links in the /articles
page.
Hint
To add a dynamic route, render the Route
component and make sure that its path
prop includes a dynamic segment (a segment beginning with a colon). Your code should look like this:
<Route> <MyComponent path='/path/:param' /> </Route>
Task 2
Add another dynamic route with a URL parameter that renders the Author
component whenever the URL path matches paths such as '/authors/maria'
or '/authors/samir'
.
Name the URL parameter in the route’s path
prop :name
.
To confirm that your code works, navigate to http://localhost:3000/authors/Lily. You should see the header “Articles by REPLACE ME” rather than the articles by the author Lily. In the exercise, we’ll fix this.