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.
✏️ John Smilga from Coding Addict created this course. Check out his channel: / @codingaddict
💻 Source Code: github.com/john-smilga/react-...
🔗 React Tutorial: • React Course - Beginne...
🔗 React Projects: • Code 15 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@eacardenase]

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

[@Steel0079]

Same here 😊

[@danilkrymskiy3431]

Wow, congrats!

[@toppmoviehighlights]

I totally agree.... and congratulations, man.

[@aldimilano4516]

Good to hear that, congratulations.

[@jacksonson1593]

Can you share how can I connect with you?

[@tanaydwivedi2922]

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.

[@remitto8367]

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.

[@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….

[@BlastbeaterPT]

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

[@mohitsaud2071]

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

[@eliarece-5996]

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

[@peterpardo4138]

Amazing job! Thank you so much for this awesome content. Props to John for teaching this topic. I appreciate your effort.

[@donramsey8119]

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

[@chadrogers5743]

Great tutorial! Thanks for teaching react router v6 so clearly!

[@adebayoayo5898]

So simplified, thanks for the great tutorial❤️

[@alvincodes]

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

[@Booker_DeVitt]

Thank you for your work. Awesome explanation of each detail !

[@python-programming]

Looking forward to this tutorial!

[@eyujunior9991]

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

[@martapfahl940]

Perfect explanation pace! Thank you John!

[@mathewdavies1480]

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. (isActive ? "link nav-link-active": "link")} to="/" end>Home

[@joshualord986]

Thanks!

[@onkillstreak2106]

saved my day. I was trying to debug this

[@amitsaha642]

Thanks a lot man

[@jacerchetoui709]

Thank you so much john for this amazing tutorial !

[@pedroafonso2114]

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

[@jamesonajobi3135]

The Simplicity is Amazing

[@charlesxstorm]

This is very well taught. Thanks for making it very clear.

[@fedu_sampa]

Another project from John. Thanks man.

[@elamandeep]

Thank you John for awesome tutorial

[@yimiesart9262]

Thank you so much, John Smilga!

[@chinonsoojoechem1462]

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

[@vitaly_p]

Amazing tutorial! Exellent work, guys!

[@ayi8603]

宝藏博主！我挖到宝了，好清晰的教学呀，爱了爱了🥰

[@Mozatron87]

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

[@CoderDmitri]

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

[@Javous12345]

Thanks man you re the best teacher i ve ever had

[@florenciobritez5521]

The course is awesome! 🔥

[@chibuzorobiefuna9586]

Great piece watching from Nigeria 🥰🥰👍👍

[@INAVACL]

Thank you so much, this solved two issues ive been having. I feel dumb lol

[@riteshmauryafullstackdevel3753]

always waiting for video 💗💗💯

[@dreamerwandering]

this tutorial is very concise, tk u teacher!

[@rightsonkirigha9669]

Finally, the video i have waiting for

[@kennedychukwu4152]

This is a great resource. Wow! thank you

[@yulyasaroyan8696]

OMG guys this is sooo nice, thanks to this channel

[@tarunsikarwar]

Please make a full course on typescript beginners to advance level

[@boluwatifejanet3162]

I just got the explanation. Thanks 😊

[@nodiraegamberdiyeva5581]

thank you so much for video tutorial , it really helps me to understand react router dom v6 )))

[@jorgenUA]

finally a good teacher,

[@aiFeeling]

Wow. Its great one .❤️

[@miketepes8208]

Thank you I learned a lot, you helped me a lot. Godbless Sir and the free Code Camp

[@medzikuser]

Thanks for video!

[@Sovit705]

Thankyou for sharing the knowledge.👍👍

[@AlexandruBejenari]

Thanks for video!!!

[@RN-hq8gg]

simple and great tutorial

[@junkmailthreestacks6675]

Awesome tutorial! Noob question. Once on the single product page, how would one button click through all the available products? Would that be slider functionality or still routes?

[@FiveFourThor]

That voice .. I can recognize it anywhere! hahah. Awesome video!!

[@wxIyz]

With subtitles, Thank you FreeCodeCamp

[@silviualexandruparaschiv9838]

Just awesome!

[@nischaljadhav8395]

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

[@chimdimgbeokwere2415]

Amazing content!

[@junsgk]

John f. DOE! Cant miss you teaching code.

[@Amanidridi457]

thank uo so much

[@mahdiouatah761]

Thank you so helpful

[@voice_famous_books4301]

Perfect, thanks;)

[@jandeswart1378]

This is a very very good video!

[@IamCkNitin]

Excellent

[@danialez]

Just amazing

[@prakharmj]

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

[@JeyDotC]

Pretty good tutorial! Also, I have discovered, several voices in English make me fall asleep, I don't know why, I've found a few channels that produce that effect on me :|

[@inaamkhan7886]

I also have the same problem .

[@sharathnair2790]

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

[@abhishekkumarsingh2387]

Scrimba has included searchParam in detail .

[@videopreneur2127]

i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head

[@shivamrana5984]

Today I am struggling with routers and then I found this

[@RiteshNEVERUNIFORM]

Great!

[@jaloliddinhaqnazarov2667]

Very good 👍👍👍👍

[@nikwotten1804]

such a great content leave more ducking likes

[@darismathewrivalx5862]

thank you

[@copaceticobserver]

For some reason on the home page/shared layout page I can't use any of the navigation links I can't click any of them and their styles on active and hover don't seem to be applied. If I open up the dom though I can access them by just clicking and if I go to one of the nested pages. the navigation seems to wrok again

[@KrishnaKumar-qx1mk]

when we change the url after login , since he is a user he must be able to navigate to other pages , how can i achive this feature?

[@saplay3372]

Thanks this

[@azubuikenjoku712]

Please what if the data is coming from a server? How do I pass it from Products page to product page?

[@westernpigeon]

FINALLYYYY

[@liyaguliaieva1111]

How does he iterate over the object at 59:00 min? I got an error that " map is not a function"😕😔

[@prabhakarmishra2182]

Hi John, I really appreciate the way you teach, but I think you are not showing us the real webpage that is the product of the code on the left side, Pay attention to @10:26 "Testing" in the browser and "testing" in the code, how come this be so?

[@jitendramistry1241]

Angular tutorials❤❤❤ please🤩??

[@heavilgaming4763]

Please post a nuxt js course ...plsssss 🙏

[@thegullvlog1551]

can someone explain to me if i learned React Router V6 why would i need to learn Next.js ? Can someone tell me the difference?? i never dove deep into Next.js so i dont know if there is a secret trick Next does im just wondering

[@demawobass]

what you do with React to configuring your own routes , with nextjs , it does that for you out of the box, nested routes might be tricky with React router but nextjs You can just put those in a folder and use index.js as the parent

[@badboys7656]

sotis when the sample finishes playing it will play over itself and you get tNice tutorials echo effect.

[@johngeronimo8821]

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

[@christopherpink842]

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"

[@leonzeng4139]

how to create the initial project and how to run it? I clone the github but I can't run it. I tried npm start, but it shows: 'react-scripts' is not recognized as an internal or external command, operable program or batch file

[@leonzeng4139]

Thanks,I got it.

[@returnMarcco]

El Reacto of the JavaScript Cartel

[@martapfahl940]

44:05 for some strange reason my Home Link is always keeping the active class.... cant figure out why

[@martapfahl940]

Found the solution actually in the React Documentation, maybe it has changed since you've been recording this. You just have to add the word "end" just before you close the opening NavLink Tag like so: This way it will work

[@siralone3646]

@@martapfahl940 Thanks

[@yoismak]

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

[@Steel0079]

React is where you start before learning Nextjs.

[@aiFeeling]

Can you give me something like spotify with flutter?

[@mrrishiraj88]

👍

[@patt4343]

The image links to cloudinary in data.js does not work anymore :/

[@patt4343]

Now they work again :)

[@vaibhavshukla1685]

😃 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...

[@DeGuzman1]

TypeError: setUser is not a function Error in Login.js in string - setUser({ name: name, email: email }); Can anybody help me? Maybe someone stuck on this too.

[@calvinwilliams729]

React Router updated their lib

[@briandacallos4234]

Mind grenade - John Smilga

[@argumentchannel]

link #page single page?

[@shineLouisShine]

So unfortunately,this tutorial doesn't seems to include the option to register/sign up from within the login form as a reasonable common requested and legit possibility..? Thanks anyway.

[@chubbyBunny94]

Can someone please summon me or when there's a tutorial for Redux without TypeScript

[@willi3.mp4]

How can the title be changed?

[@EhteshamShahzad]

React Router tutorial: switch to NextJS.

[@wishmeheaven]

Hey John, v6.4 changed the rules

[@bishalmahanta1765]

49:05