React Router 6 – Tutorial for Beginners

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.

⭐️ 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

--

[eacardenase]

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

[tanaydwivedi]

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.

[mohitsaud]

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

[eliarece-]

You published this the day after I learn React Router 6...

[remitto]

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.

[eyujunior]

I was going to learn this tomorrow morning and somehow youtube recommended it to me🤩🤩🤩

[Sports-Made]

I watched lots of videos, but whenever I watch John’s videos things are so much clearer…. Thank you for all the time you have put into these videos… Will definitely send a big one to you….

[chibuzorobiefuna]

Great piece watching from Nigeria 🥰🥰👍👍

[pedroafonso]

Best explanation about react router I saw, thank you for this John !

[tarunsikarwar]

Please make a full course on typescript beginners to advance level

[mathewdavies]

If you are finding your NavLink component is always highlighting 'home' as well as the current page, you can fix this by putting 'end' on the end of your Home NavLink opening tag.

i.e. <NavLink className={({isActive}) =>(isActive ? "link nav-link-active": "link")} to="/" end>Home</NavLink>

[BlastbeaterPT]

This is the best React Router course i have witness. Very concise and straightforward :)

[CoderDmitri]

John Smilga does it all... with STYLE! =)

[donramsey]

Absolutely one of (if the not the best) I have viewed! Thank you.

[nischaljadhav]

Done and Dusted. React Router V6 understood !! Roger that sargent

[alvincodes]

Awesome tutorial. Most courses are yet to adopt to React Router V6. Thank you, John.

[Mozatron]

I'd have given this multiple likes if it was possible. Top work John.

[fedu_sampa]

Another project from John. Thanks man.

[chinonsoojoechem]

Thanks a lot John.
I'll be so glad if you release a NextJs course

[vaibhavshukla]

😃 I have just completed this tutorial and now i confidently say that i know react-router-dom uses.. Thanku john smilga and whole FreeecodeCamp team...