Learn React Router

4.8
28 reviews

last updated 40 days ago

Start for Free
react-router

This course is up to date, guaranteed

  • react-router
  • react-router
  • react-router

The Numbers

  • 19 Topics
  • 218 Minutes of Video
  • 22,609 Words of Text
  • 16 Quizzes
  • 16 Exercises
  • 1 Project

The Outline

  • Introduction, Philosophy, and Tips

    • Course Introduction

    You'll start the course off by looking at some housekeeping items like what you'll learn and what to expect.

  • Nested Routes

    • Nested Routes with React Router
    • (Quiz) Nested Routes
    • (Practice) Nested Routes
    • (Solution) Nested Routes

    In this section you'll learn how to utilize nested routes with React Router.

  • Query Strings

    • Query Strings with React Router
    • (Quiz) Query Strings
    • (Practice) Query Strings
    • (Solution) Query Strings

    In this section we'll break down how to implement and parse query strings with React Router.

  • Passing Props to Link

    • Pass props to React Router's Link component
    • (Quiz) Passing Props to Link
    • (Practice) Passing Props to Link
    • (Solution) Passing Props to Link

    In this section you'll learn how ot pass props to React Router's Link component.

  • (Project) Hash History Basketball League

    • Introduction and starter files with Create React App
    • Starter Code
    • Initial Routes
    • Catch-all (404) route
    • Home Route
    • Sidebar Component
    • Player's Route
    • Team's Route
    • Team Page
    • Articles Route
    • Loading Component
    • Animating Players
    • Code splitting

    Now that you know everything there is to know about React Router, now is the time to take that knowledge and apply it towards a real-world React application.

  • Protected Routes

    • Protected Routes and Authentication with React Router
    • (Quiz) Protected Routes
    • (Practice) Protected Routes
    • (Solution) Protected Routes

    In this section, you'll learn how to create authenticated routes (routes that only certain users can access based on their authentication status) using React Router.

  • Bonus

    • Server Rendering with React and React Router
    • Fixing the 'cannot GET *url*' error in React Router
    • Recursive Paths with React Router

    Here's some bonus content that doesn't fit into the normal flow of the course.

  • Why React Router?

    • Introduction and Philosophy behind React Router
    • (Quiz) Why React Router?

    React Router v4 introduced a new dynamic, component based approach to routing. React Router v5 introduced some custom Hooks. In this section, you'll learn about the philosophies behind React Router and see a soft introduction to the API.

  • Passing Props

    • Passing Props to a component rendered by React Router
    • (Quiz) Passing Props
    • (Practice) Passing Props
    • (Solution) Passing Props

    In this section you'll learn how to pass props to components being rendered by React Router.

  • 404 Pages

    • Handling 404 pages (catch all routes) with React Router
    • (Quiz) Catch All Routes
    • (Practice) Catch All Routes
    • (Solution) Catch All Routes

    In this section you'll learn how to implement catch all routes for handling 404 pages in a React app with React Router.

  • Sidebars

    • Rendering a Sidebar or Breadcrumbs with React Router
    • (Quiz) Sidebars
    • (Practice) Sidebars
    • (Solution) Sidebars

    When building an app with React Router, often you'll want to implement a sidebar or breadcrumb navbar. In this section you'll learn how.

  • Animated Transitions

    • Animated Transitions with React Router
    • (Quiz) Animated Transitions
    • (Practice) Animated Transitions
    • (Solution) Animated Transitions

    In this section you'll learn to how to add animated transitions to an app using React Router.

  • Preventing Transitions

    • Preventing transitions with React Router
    • (Quiz) Preventing Transitions
    • (Practice) Preventing Transitions
    • (Solution) Preventing Transitions

    Many times when building an app with React Router, you want to warn the user before they navigate away from a specific route. An example of this would be when your user has dirtied a form and then wants to navigate away from that page. In this section, you'll learn how to do that.

  • Outro

    • Outro

    What's next? We answer that in this section.

  • URL Parameters

    • URL Parameters with React Router
    • (Quiz) URL Parameters
    • (Practice) URL Parameters
    • (Solution) URL Parameters

    URL parameters are a fundamental aspect of React Router and a fundamental aspect of building web applications. In this section, you'll break down the 'URL Parameters' example on the React Router documentation to learn how you to effectively leverage URL parameters in your React app.

  • Programmatically Navigating

    • Programmatically navigate using React Router
    • (Quiz) Programmatically Navigate
    • (Practice) Programmatically Navigate (Declarative)
    • (Solution) Programmatically Navigate (Declarative)
    • (Practice) Programmatically Navigate (Imperative)
    • (Solution) Programmatically Navigate (Imperative)

    When building an app with React Router, eventually you'll run into the question of navigating programmatically. Because of the churn that React Router has gone through in the last few years, there are a lot of outdated, and frankly incorrect tutorials out there. The goal of this section is to break down the correct approaches to programmatically navigating with React Router.

  • Ambiguous Matches

    • Ambiguous Matches with React Router
    • (Quiz) Ambiguous Matches
    • (Practice) Ambiguous Matches
    • (Solution) Ambiguous Matches

    When using React Router, there are times when you may want to have both a static path like /settings along with a dynamic path like /:uid. The problem is that /settings is ambiguous and will match for both /settings and /:uid. In this section, we'll look at how to fix this ambiguous matches problem with React Router.

  • Customizing Link

    • Customizing your own Link component with React Router
    • (Quiz) Customizing Link
    • (Practice) Customizing Link
    • (Solution) Customizing Link

    Because React Router is just components, composing your own custom Link component is pretty straightforward. In this section we'll do just that.

  • Code Splitting

    • Code Splitting with React Router
    • (Quiz) Code Splitting
    • (Practice) Code Splitting
    • (Solution) Code Splitting

    Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load. In this section we'll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.

  • Route Config

    • Route Config with React Router
    • (Quiz) Route Config
    • (Practice) Route Config
    • (Solution) Route Config

    React Router moved away from a route config approach to routing to a component based approach. However, if you need it, you can still have a central route config with React Router. In this section you'll learn how.

  • The Love

    This is the part where we're supposed to tell you how great the course is. Even better if we get other "famous" developers to give their "reviews". Instead, we'll let those who have actually taken the course do that.

    4.8

    28 Reviews

    86%
    11%
    4%
    0%
    0%
    • LC
      Luis C
      2 months ago

      Other great course to learn a lot!

    • K
      Kevin
      7 months ago

      Clear examples boiled down to the minimum

    • Avatar for Platon Kobylyatskiy
      Platon Kobylyatskiy
      7 months ago

      Great course! So far watched the React, React hooks and this course, liked all of them (this one on a second place after hooks), the explanations are great and practices are challenging. I loved the bonus on SSR too!

    • WL
      Wesley Lachenal
      8 months ago

      Simple enough to understand

    • Avatar for Clark Dowding
      Clark Dowding
      9 months ago

      I've done a lot of courses as I've been working to convert from my former life to a Fullstack Dev. I've seen good courses and I've seen bad courses. This is a great course. Tyler approach works great. I know that with 20 minutes I can get through an into video to learn a concept. Give the new knowledge a go in the sandbox. Then watch his solution to fill in the gaps or just reinforce what I learned/figured out. This is a super-effective approach. Tyler's sandboxes are preset so all of the foundation stuff is done. He leaves just the right stuff incomplete so you can quickly use what you learned. That is so important in getting stuff to stick. Nice work ui.dev. Clark

    • Avatar for Mahmoud Mheisen
      Mahmoud Mheisen
      9 months ago

      thanks, it was a nice course to take

    • J
      Jamie
      12 months ago

      Loved all of Tyler's courses best React courses out there. They are so in-depth and well thought out. I wouldn't hesitate to take these at all. I loved the practice problems and the quizzes and the projects at the end. They really helped to solidify my React knowledge.

    • Avatar for Dina Tahoun
      Dina Tahoun
      12 months ago

      Amazing course, I Love it!

    • AB
      Arpan Banerjee
      13 months ago

      It was simply awesome, just like his other courses.I think the best course is the redux course, you will not get an explanation like that anywhere else. He explained how to build your own redux library, by doing that you will know the ins and outs of it. Then following react redux won t be any problem.

    • ZW
      Zenek Wiaderko
      14 months ago

      I did this course as last one of all my courses and it's rather weak in comparison to other. IMO Tyler's best feature as a teacher is the way he is explaining complicated stuff. Starting from very basic concept and go deeper with every sentence. That's why I really enjoyed previous courses (especially Redux!). Here almost all videos were the same: Here's some feature and you use it like this. Rather boring.

    Join Us

    Join thousands of ambitious developers who use our courses, community, and weekly events to scale their JavaScript careers.