Learn

So far, all the routes we’ve covered have been static, which means they match a single unique path. This works for predetermined routes that render a consistent view. But what if we need to build a route that is more flexible?

For example, imagine a tech news site where each article is accessible from the path '/articles/' + some-title where some-title is unique for each article. Specifying a distinct route for every article would not only be verbose and time-consuming, but it would also require an impractical amount of maintenance should the path structure ever change or we need to add new articles.

It would be much more convenient to define a single route that can match any path with the pattern '/articles/' + someTitle and know exactly which component 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. They appear in a dynamic route as a colon (:) followed by a variable name, like so:

const route = createBrowserRouter(createRoutesFromElement( <Route path='/articles/:title' element={ <Article /> }/> ))

Let’s break down this short, yet powerful demonstration of URL parameters:

  • In this example, the path prop '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').

Let’s take advantage of dynamic routes by using URL parameters in our application.

Instructions

Task 1

Navigate to App.js. Within the Root Route, 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 path='path/:param' element={ <MyComponent/> }/>

Task 2

Add another dynamic route within the Root 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 next exercise, we’ll fix this.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?