React Router 6 – Tutorial for Beginners

Ecommerce Empire Academy

Learn how to use React Router V6 in this crash course for beginners. React Router is the most popular way to add page routing in React Apps. It is used very frequently in React projects.

✏️ John Smilga from Coding Addict created this course. Check out his channel:

πŸ’» Source Code:

πŸ”— React Tutorial:
πŸ”— React Projects:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) First Pages
⌨️ (0:11:01) Page Components
⌨️ (0:15:47) Link Component
⌨️ (0:19:39) Error Page
⌨️ (0:22:39) Navbar
⌨️ (0:24:39) Nested Routes
⌨️ (0:29:39) Shared Layout
⌨️ (0:35:58) Index Pages
⌨️ (0:41:43) NavLink Component
⌨️ (0:49:02) URL Params
⌨️ (0:55:56) Single Product
⌨️ (1:01:36) useNavigate()
⌨️ (1:09:49) Protected Route
⌨️ (1:13:52) Refactor

πŸŽ‰ Thanks to our Champion and Sponsor supporters:
πŸ‘Ύ Raymond Odero
πŸ‘Ύ AgustΓ­n Kussrow
πŸ‘Ύ aldo ferretti
πŸ‘Ύ Otis Morgan
πŸ‘Ύ DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

27 thoughts on “React Router 6 – Tutorial for Beginners”

  1. Esteban CΓ‘rdenas

    John is so good at teaching! Thanks to him I landed my first job as web developer! :3

    1. Hello sir, I’m actually graduating this year for 2 yrs. in ACT and I’m so nervous as i don’t have much of an idea about this. I was also planning on applying for a web developer too.Can, you give any tips about web development and what are the most required methods for this.

  2. hey, cool video!

    Im new to react and got a little confused… can we simply not use NextJS for this? It comes with other features too

  3. Love you John ❀. One of the biggest reasons that I have started working as node.js developer is you John ❀.

  4. Hey is the on refresh action giving error because the user request is sent to the backend handled here?

  5. I was going to learn this tomorrow morning and somehow youtube recommended it to me🀩🀩🀩

  6. This is a godsend! Pretty much every react tutorial on the internet is muddied by the breaking changes from RR5 -> RR6. As someone getting back into React after a break this will save my search history from endless stack overflow searches.

  7. Sharath Nair

    Every v6 tutorial is lacking the searchParams part of it. I feel that is the most important part. There are only few tutorials on that

  8. Francis Lagares

    John’s ‘ What’s up everybody’ instantly draws a smile in my face πŸ™‚

  9. Tanay Dwivedi

    Best react router v6 explanation that i had ever found on internet. Binged watch this whole video and it was absolutely worth it. Thank you John for making react router v6 easier.

  10. I took some time away from React, came back, and was having tons of problems with the new React Router 6. Following this tutorial fixed everything, thanks so much.

  11. John Paulo Geronimo

    48:16 May I know why you have “link active” instead of “active” in the first condition of your classname?

    1. christopher pink

      i had to watch over a few times to know, so “active” is default styling provided by react-router, so when you want to style it yourself with custom colours your can create a class name in your css and name it whatever you want , he just named it link and added it to active, thats why he wrote “link active”

Comments are closed.