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 Loader) to determine what content to show a user. For example, a user visiting wikiped…
  2. 2
    In order to use React Router, you will need to include the react-router-dom package (the version of React Router built specifically for web browser…
  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
    One potential downside of nesting your routes this way is that changes to your route structure in one file might break the routes in other files. For example, suppose we wanted to change all inst…
  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