React Router v5

4.7
19 reviews

last updated 57 days ago

react-router

This course is up to date, guaranteed

So you want to learn React Router v5?

Here are some common approaches

  • Random Blogs

    It's not that blog posts are bad, it's that finding and piecing together unrelated yet up to date posts that form a linear, cohesive path to learning complex technical topics is hard.

  • Youtube Videos

    It's happened to all of us, one moment you're using Youtube to learn about React's useEffect Hook and the next you're watching a "KIDS REACT TO PAYPHONES" video. Finding a high-quality, up-to-date YouTube video that effectively answers all of your questions on a JavaScript topic might actually be more difficult than finding a needle in a haystack. With so many videos and zero quality control, it’s easy to get sucked down the YouTube rabbit hole for hours without getting much learning out of it.

  • Live Workshops

    You know what they say, the best learning happens sitting in a classroom for 8 hours at a time listening to dry lectures and working through practice problems that only serve to make you feel comfortable so you’ll feel like you learned something. Oh wait, no. No one says that.

  • Conferences

    Things conferences are great for - networking, travelling on your company's dime, free swag, finding other companies to join. Things conferences are not great for - learning in depth technical topics that you will remember and put into practice literally 3 days later when you’re back at the office, quality wifi.

  • All-In-One Subscriptions

    These are the larger companies that offer courses on seemingly every technology under the sun. We won’t name them, but chances are your company has a business subscription to at least one of them and chances are that you don’t use it much. Their courses are made by a wide assortment of third-party contractors and optimized for production quality, not educational value.

The better approach?

All our courses follow the same proven structure, optimized for knowledge, not the illusion of learning.

  • Effort

    We're obsessed with making the most effective developer education content on the planet. On average, it takes us around 1,900 hours to create a new course. While others prioritize quantity, we optimize for quality.

  • Non-Contextual Analysis

    The first time you're introduced to a topic, any extra contextual information you have to process only serves as a distraction. Although it takes more time, our non-contextual analysis comes in two forms, video and text. This way, no matter how you prefer to learn, there's an option for you.

  • Quiz

    Nothing fancy here. After learning about the topic you'll receive a quiz to make sure you have a solid conceptual understanding before moving on to the hands-on practice.

  • Non-Contextual Practice

    Similar to the non-contextual analysis, context is everything. The first time you're hands-on with a new topic, any extra contextual information you have to process only serves as a distraction. This is why we first have you work through small, focused practice problems before you ever see the new topic in the context of a larger project.

  • Contextual Practice

    You've probably experienced it before, you feel like you're learning so much going through a tutorial only to hit a wall once it's time to actually apply that knowledge outside of the context of the tutorial. All the non-contextual practice in the world is useless if you're not then able to take that knoweldge and apply it towards a (contextual) production level codebase.

The result?

React Router v5 Mastery

The ability to take what you learn and apply it towards a production codebase

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

This Course

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

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 v5
    • (Quiz) Nested Routes
    • (Practice) Nested Routes
    • (Solution) Nested Routes

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

  • Query Strings

    • Query Strings with React Router v5
    • (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 v5.

  • Passing Props to Link

    • Pass props to React Router v5'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 v5'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 v5, 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 v5
    • (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 v5.

  • Bonus

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

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

  • Why React Router v5?

    • Introduction and Philosophy behind React Router v5
    • (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 v5
    • (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 v5.

  • 404 Pages

    • Handling 404 pages (catch all routes) with React Router v5
    • (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 v5.

  • 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 v5
    • (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 v5.

  • Preventing Transitions

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

    Many times when building an app with React Router v5, 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 v5
    • (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 v5 documentation to learn how you to effectively leverage URL parameters in your React app.

  • Programmatically Navigating

    • Programmatically navigate using React Router v5
    • (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 v5, 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 v5.

  • Ambiguous Matches

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

    When using React Router v5, 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 v5 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 v5
    • (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 v5.

  • Route Config

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

    React Router v5 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.

  • Hype

    • You won't find a better React Router Course. I promise. You learn React Router and also get SSR with this. How great is that!

    • Awesome course - just like all courses from Tyler. In depth explanations, real world examples. Great work man, keep it up :) Hope for some GraphQL course next ;)

    • This was by-far the best React Router course I have seen. Started with the basics but it didn't stop there. Smooth transitions to the next concept. Updating the previously developed project also helped as we used the concepts learnt first-hand. Feel pretty confident about using React Router in my own project now. Thanks a lot Tyler!

    • React Router v4 is one of the best courses I've done online. The structure and quality of content is great. Tyler has covered almost all the use cases. What is unique is Tyler has explained the theory in text. Personally, it helped me get the theory quite fast and followed the videos later. It was well worth the time. Terrific job!

    Master React Router v5 today

    FAQ

    • What makes these courses different from other online courses?

      Our courses are designed to teach you everything you need to know to confidently write production-ready code. The tradeoff is it will require more work and focus than a course that features a few bite-sized screencasts. Real learning takes time, but you can feel confident that once you've finished a course, you’ll have mastered everything you need to know with minimal knowledge gaps.

    • Do the courses have captions?

      Yes.

    • How long should I expect each course to take?

      Naturally, it depends. Considering all our courses are comprised of video, text, quizzes, practice problems, and curriculum - 15-30 hours per course is a safe assumption.

    • In which order should I take the courses?

      If you're comfortable with JavaScript (including ES6) and want to jump straight to React, go with "React", "React Hooks", then any other course that looks interesting. If you're not comfortable with JavaScript, start with "Modern JavaScript", then "Advanced JavaScript", then any other course you'd like.

    • What level of experience is required for getting the most out of these courses?

      A fundamental understanding of JavaScript or familiarity with another programming language. For example, you should be comfortable with functions, arguments, loops, control flow, etc. If you want to jump straight in to the React courses, we recommend having a stronger knowledge of JavaScript, which you can get from our JavaScript courses if you’re unsure.

    • How does the subscription work?

      Like Netflix. You pay $40 per month or $350 per year for access to all our courses, premium newsletters, and events. Your subscription will be active until you cancel, which you can do at any time in your dashboard.

    • I need an official invoice with certain fields like VAT. Can I get one?

      Once you sign up, as part of the welcome email, you'll be given a link to fill out where you can input all your company's info.

    • What projects will I build throughout the courses

      You can find every project on the /projects page.

    4.7

    Course Ratings

    79%
    16%
    5%
    0%
    0%
    • ZW
      Zenek Wiaderko
      23 days 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.

    • G
      Guna
      24 days ago

      Good content. The way you are teach the concepts is superb.

    • Boris YV
      3 months ago

      Tyler does help, I have not been disappointed with any class, not only they are excellent, but even in areas I thought I knew well, he has filled a lot of gaps. Thanks.

    • Hideki
      3 months ago

      We strive to find updated content instead of look for good teachers. And Tyler is one of the best. He teaches you a lot of things that you don’t see in other courses and maybe think that you don’t need them. But in the future you will see how to understand the things under the hoods and how they really work, makes you a better developer. As he says: “Cause you’re smarter now, and that’s all I care about”.

    • Ashish Shetty
      4 months ago

      You won't find a better React Router Course. I promise. You learn React Router and also get SSR with this. How great is that!

    • Temitope Olotin
      4 months ago

      I barely know React.js months ago, through this course I've been able to start building a music beat selling project. Tyler is a genius. Thank you for this course

    • Preetee G.
      8 months ago

      Great spot to learn about react-router.

    • Vijay
      10 months ago

      Awesome work on the react router with server part I never knew all the complexity involved until I watched this course. This course is for all those who wants to write React by leveraging the ability of React Router.

    • Juan Salvador
      17 months ago

      Following some of McGinnis courses. A lot of patterns, not just simple samples.

    • Aarohi Ajgaonkar
      18 months ago

      This was by-far the best React Router course I have seen. Started with the basics but it didn't stop there. Smooth transitions to the next concept. Updating the previously developed project also helped as we used the concepts learnt first-hand. Feel pretty confident about using React Router in my own project now. Thanks a lot Tyler!