Key Concepts

Review core concepts you need to learn to master this subject

What is React Router?

React Router is a library that provides navigational components for React developers to create Single-Page Applications (SPAs) with dynamic, client-side routing.

Applications that use React-Router can benefit from the separation of content afforded to multi-page applications without the break in the user-experience caused by page reloads.

React Router
Lesson 1 of 1
  1. 1
    Routing is the process by which a web application uses the current browser URL (Uniform Resource Locator) to determine what content to show a user. For example, a user visiting wikipe…
  2. 2
    > Jan 2022 Update: This project is meant to be written using React Router v5. React Router v6 introduces breaking changes and your project will not work using these instructions if you install …
  3. 3
    In the React Router paradigm, the different views of your application, also called routes, along with the Router itself, are just React components. To include them in your application, you will n…
  4. 4
    With the Router component in place, we can begin defining the different views, or routes, that our application will render for various URL paths. For example, we might want to render an About com…
  5. 5
    In the last exercise, you used the URL bar to navigate to a path that matched one of your application’s routes. But how do you navigate from within the app itself? When building a website using HT…
  6. 6
    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 wh…
  7. 7
    It is common to use the value of URL parameters to determine what is displayed in the component that a dynamic route renders. For example, the Article component might need to display the title of t…
  8. 8
    By design, a Router will render all the Routes whose paths match the current URL. This allows us to compose layouts in which multiple components should appear or disappear based on the current UR…
  9. 9
    Up to this point, we have been working with routers that are small enough to be rendered entirely in a single file. But as an application grows in scope, it can be useful to split up the router and…
  10. 10
    In the previous exercise, we created a nested Link and Route in the Categories component. // Ex: Create a link for the ‘/categories/html’ page {category} … // Ex: When the user visits /…
  11. 11
    If you take anything away from this lesson, it should be that React Router treats everything as a component. To get fully comfortable using React Router in your code, you have to embrace this idea …
  12. 12
    In the previous exercise you learned how to redirect declaratively by rendering a Redirect component that updates the browser’s current location. Though this approach follows React Router’s declara…
  13. 13
    Query parameters appear in URLs beginning with a question mark (?) and are followed by a parameter name assigned to a value. They are optional and are most often used to search, sort and/or filter …
  14. 14
    Great work! You’ve learned everything you need to know to add front-end routing to your React applications using React Router! To recap, you can now: * Install react-ro…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo