Learn

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 or html-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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?