React Router Tutorial | React For Beginners

Check out my courses and become more creative!
developedbyed....
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
In this episode we are going to cover a popular react library called React Router. React Router allows us to create client side routing in our react project.
Probably one of the best thing it allows us to do is create dynamic routes and fetch api calls based on route parameters.
📕 Things covered in this video:
- React Router
- How to use the BrowserRouter, Route and Switch.
- How to fetch apis with react router
❤Become a patreon for exclusive videos and more!
/ dev_ed
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/Dev...
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons....
#javascript #react

[@Ayeces8s]

As of approximately November 3rd, 2021, react-router-dom v6 (stable) was released and there are a few things outlined in this tutorial that need to be changed in order for it to function properly. 1. Instead of importing and using the Switch component, import and use the Routes component instead. (e.g. import { Switch } from ‘react-router-dom’; becomes import { Routes } from ‘react-router-dom;’ 2. The “component” prop within a Route should be specified as an “element” prop instead (e.g.

[@chimwemwechinamale6716]

Also make sure that the element is JSX i.e. element={}

[@eshw23]

Way to helpful thank you

[@devanshvashishta]

this comment and answer by Chimwemwe removes the bug... Thank you guys

[@starriet]

wow thanks!

[@onilbautista]

I hope Ed would see this.

[@kittjosef]

Dev Ed is a very effective teacher, he’s not irritating to listen to, he’s humorous, he’s direct, and all he says are comprehensive so kudos. I learned react fundamentals thru him. Thanks, man.

[@aluuusch]

when you need to come back to his videos multiple times, those querky way to present is kind of annoying. For the first time, it's ok for me though.

[@chikowamambo3786]

@@aluuusch your problem not his

[@daboos8]

Routes are impressive. But, what's more impressive is how you magically 'routed' all this information to my brain in half an hr... what kind of wizardy is this?!!

[@alizalakhani7300]

His explanations are always amazing.

[@vickyrocks6560]

yes exactly ... +1

[@preciousadeyinka2786]

My point exactly, I never believed I could learn this much in half an hour if I was thinking of gathering all the pieces myself, it would take days probably to finish gathering if not more. Thanks a lot, Edddddd!

[@GiorgiGvimradze1]

If you guys understand that, why I can reach each page separately by refreshing, but cant reach from about "/about" to home dir "/" back.

[@paucolome4298]

These videos made me buy his courses, they are absolutely amazing

[@harunguven8581]

this tutorial is now slightly out of date, to fix issues: after timestamp 08:30 to 12:20 solution is below. after 12:20 to 14:35 we don't need to add exact keyword to anymore, due to last changes to react-router-dom. at 29:52 if match object doesn't work use useParams( ) from react router dom, const params = useParams(); add this in ItemDetail( ) , now use params.id in fetch function. step 0 -- > don't use App.js step 1 -- > create RouteSwitch.js in src folder. step 2 -- > add this code below to RouteSwitch.js step 3 -- > let index.js render RouteSwitch.js instead of App.js step 4 -- > continue to learn. // start to copy here import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import About from "./About"; import Nav from "./Nav"; import Shop from "./Shop"; const RouteSwitch = () => { return ( ); }; const Home = () => { return ( Home Page ); }; export default RouteSwitch; // end copy here

[@prawnstars3160]

thanks! Coming from theodinproject and this is very relevant

[@adeelnazir2579]

Yes you are right

[@slashg5908]

Thanks this helped!

[@JaredTerryFAM1LYGUY]

What is the reason for needing to use RouteSwitch.js versus App.js? Shouldn't these function the same so long as your index.js is set properly?

[@gagandeepv7034]

Thanks big time

[@anjepnjr2995]

after serious hours of struggling with react routes i finally stumble into this awesome 30min vid that save ma life . Thanks Ed now i can handle routes without any prob

[@newthepanch]

same here, all the react router tutorials out there are just simply "menu" style, but we need something like this to understand how the f!"·$% it works, thank you so much for your time sir.

[@jaywantjagtap9186]

Totally agreeeeeeeeeee hahahaha!!

[@varshinigurumurthy2141]

True said... making simple to understand

[@ahmedaminedev]

**KZbin recommendation**: ... After 5 seconds: - I am react developer now

[@AhmedKhaledCH3]

what kind of weed do you smoke man you seem extremely happy lmao nonetheless i enjoyed this video so much and it was very helpful thanks

[@BobbyBundlez]

eh. funny guys often got some deep pain lol. he makes dark jokes if u listen carefully lolololol

[@wtfdoiputhere]

Man whenever i'm fed up with anything web related i come to watch this guy and calm down, i love his way of explaining things so simple and he just seems as lost as me when coding then BAM everything works

[@chrisneal6374]

"easy peasy lemon squizanno" is the new abracadabra lol great tutorial!

[@liam_iam]

In case anyone missed it, the reason match.params contains "id" at all is because he defined it inside the route by saying path="/shop/:id". So the value of id is essentially set to be the same as the last part of the URL. It could have been called anything else, e.g. if it was instead written as path="/shop/:itemId" then match.params would contain a key called itemId.

[@M4RCi92]

Such a squeaky clean, easy to understand, well structured guide. I also love the overall friendly, upbeat vibe of the whole thing. This is honestly among the very best tutorial videos I've ever seen, thanks a lot, Ed!

[@asifmahmood3804]

I think this is the best tutorial for React Routing. I have watched so many videos to learn React Router but couldn't learn it. Finally I have found this tutorial and learned the React Router properly. Thanks Ed.

[@connoroverby8868]

Your "Hey, Google..." set off my Google Home telling me about the weather today

[@mehmetnadi8930]

I don't usually comment or like tutorial videos but I just love this guy. Thanks for sharing your knowledge with us. You're a good KZbinr

[@ankurharna1]

Thanks Ed, wonderful video... very informative.. and to the point... your 30min video saved my 3hrs to study, understand and implement the topic....

[@flokipanda]

I like your teaching style. I thought that react is so hard. But after finding, your react videos I fall in love with react. Thank you so much.❤❤❤❤❤

[@bryanperryruiz4635]

This guy is a legend.. Thanks for the wonderful tutorial, I've learned a lot from you than my college professor.

[@gokulambalavanan3592]

I could relate to this !!

[@nirmitjatana1245]

Your college teaches React??

[@tkssharma]

Here you go Everything about React from Beginner to Advance level kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@bryanperryruiz4635]

@@nirmitjatana1245 yes they do, from it's history to it's application on the real world.. And we didn't learn anything 😅

[@TheBilalblanco]

the world is so blessed to have people like Ed :)

[@huntershaw5880]

God, it' so refreshing to actually see someone teaching code that HAS a personality. Makes the video go by 10x faster. Keep up the good work, my dude!

[@preciousadeyinka2786]

Swear! Like you are totally right my man, this dude is awesome.

[@dpraveenk38]

Exactly! Every other video out there for tutorials are droning.

[@RonWarnerBubbleKing]

I dunno man, by 0:32, I was too annoyed to continue, so I'm moving on to the next search result.

[@fullmetaljacket1803]

Same, I love Ed, I would choose to watch him over anyone else because his voice has more than one setting

[@Mark98T]

@@RonWarnerBubbleKing Maybe your knowledge is the same with what siri said about react router and your ego is too high to hear other opinion. Or you prefer long and boring two hours of video with indian accent, fast speech, and loud key presses...

[@jaytran247]

The way you deliever the tutorial is genius. The thing that I highly appreciate is that you are able point out the key things to avoid mistakes and make me understand better. Thanks so much.

[@elineoosterloo3555]

Stop it! You're making me laugh out loud at work! XD

[@pastoroniasmunetsi]

he is impressive first tutorial to enjoy

[@tkssharma]

All you need for React Formik for building Forms kzbin.info/www/bejne/aamwmn5rort1pq8 React functional Hooks kzbin.info/www/bejne/fp6yqGBqatuabpI React JS Full Course kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@deenster]

This guy is a legend 😂

[@ErickG]

I want to be able to laugh at work one day 😔

[@abhikulkarni5346]

It's good explanation....

[@kittnlogic]

I watched three other tutorials and read the docs before landing on this one. This was so clear and easy to follow. You're an amazing teacher and communicator! Thank you!!

[@TheShiwanthasr]

API has changed, so use it like this. const fetchItems = async () => { const data = await fetch('fortnite-api.theapinetwork.com/upcoming/get'); const items = await data.json(); console.log(items.data); setItems(items.data); } return ( {items.map(item => ( {item.item.name} ))} )

[@gouravmajee9913]

Thanks man 😍

[@basic-bhargav6248]

Helpful dude saved my time Thanks

[@mscodez6900]

this is something meaning full, clear crystal explanations. impressive MAN

[@trunkey-dev]

This tutorial is outdated everyone

[@BharatSingh-zk8lx]

why would someone dislike this video. Thanks a lot for this video. Am a beginner and U r an Amazing teacher. I went through 10 videos tutorial for router and couldn't understand anything. And u did it in just 30 mins.

[@alexbkf]

It seems I am not the only one who felt a good personality from him. I am a newbie to the react world and this video really gives me confidence and motivation. Thanks bro!

[@padamsubba1973]

God damnnn, Cristal clearly, visibly, transparently and absolutely I now understood the React routing.

[@dawnjinx4962]

Me: ditches uni lectures because you explain things so much better :)

[@johnfrancisco6736]

Once again, Ed comes through with a winner. One can actually follow along with this and construct a working application. Some issue with the API used in the course, but suitable substitutes are available. I love the way he says "back ticks." I wind up repeating it every time he uses it.

[@OmPrakash-ot3nr]

Why at 32:20 images field was needed to set to empty?

[@kamila_nowak]

Magic of this video is that not only you teach us but also have fun with all the work and little mistakes you do

[@cedrics7374]

I love how you explain with great simple, real live examples.. amazing teacher!

[@tkssharma]

All you need for React Formik for building Forms kzbin.info/www/bejne/aamwmn5rort1pq8 React functional Hooks kzbin.info/www/bejne/fp6yqGBqatuabpI React JS Full Course kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@bismajamil3252]

since the API link has updated so add this in your shop.js file {items.map(item => ( {item.item.name} ))}

[@walkman4828]

The most crystal clear tutorial for React Router!

[@amanagarwal7849]

That's some awesome content! I was waiting for a channel like this. Glad I found one today. Subbed instantaneously! Can you make a video on fetch API? That would really be helpful.

[@mohamedshuaau632]

Came here to learn. Got a good giggle. Love this guy

[@bhavinshah4257]

Please keep showering your knowledge . Great tutorial. Great voice and your communication skills keeps enjoying the crowd while learning :)

[@CharlExMachina]

Your style of teaching is amazing, you just got a new subscriber!

[@vricop]

Shouldn't `` components be inside `` and not the other way around? Just saying. 😜

[@pick2598]

It's a react thing...

[@jerrysg96]

OMG, you make it so clear. Thanks! I hope you feel better soon, so we can see more of this marvelous content

[@developedbyed]

6th?

[@bhatnagarcapital]

Ed , can you pls upload the codes

[@chandrakantnyaupane5265]

hey dev, the API link doesnot work. How to solve that issue. Thankx

[@taheraalam5156]

You're extremely humorous! It is so fun to watch your tutorials!Thank you so so so very much for making:)

[@AMPTechGrade]

You deserve alot of credit for this video good sir. This was the quickest way to helping me get a react JS router setup in minutes. Keep up the good work.

[@KingUnity22]

This is a great tutorial. Like really fantastic. This is the building blocks that every front-end developer needs in order to build fast and interactive websites.

[@hm8909]

Cool tutorial, thanks for sharing! Question: when console.logging "item.images" I do see the props inside, but when calling "item.images.transparent", like you, I get the undefined error. How come I can see it but not use it? Why do I have to declare the images object in the state first?

[@seanbarker4713]

i was wondering this too at first. It's because the page renders once before the API request is complete. It therefore reaches the return statement before the API request is complete and runs the code calling "items.images.transparent". Before the request is complete this is undefined. If you add a console.log('test') or something after the FetchItem function is called, you'll see the 'test' appear twice: once before, and once after the API data loads

[@karsi14_]

@@seanbarker4713 did you solved it? I've been dealing with the same problem for two days and still can't solve it :c

[@seanbarker4713]

@@karsi14_ what I said above should work

[@karsi14_]

​@@seanbarker4713 I have a lot of console.log in all the code (I was testing why it was throwing the error) and that's how I discovered how it was rendering, I have a console.log after the FetchItem function is called and it still doesn't work, still throwing the same error :( Some comments above someone told me to update my npm and React hahaha hope that combining both things it finally works c: Thank you c:

[@earthycoin]

This is the best explanation on the Tube hands down.

[@jakubkoj1]

Hey, I have a question. You are using useState. Is it different from converting App.js to class and then setting a constructor with this.setstate? Because this looks som much simpler and cleaner. Thanks.

I ask myself same question...

[@ulzrintheswift715]

@ As far as I know using the state hook is pretty much the equivalent as you cant use any hooks in React class components. They allow you to use React without classes.

[@Colstonewall]

When you use function based components, this is the only way to set state, with the "useState" Hook. You can't use setState in a functional component as you can in a Class Based one. BTW, you don't need a Constructor in a Class Based component to use setState. I only use a Constructor if I need to initiate something else (other than setState).

[@_rachid]

It does the same thing. useState is a React hook which provides the ability to implement states in functional component. It's a simple and cleane way than using the class components.

[@minhlephancong8335]

man, you're making every suffering so fun. Luv it

[@cuerdasn]

Your React tuts are the absolute best. So fun and educational. And your excitement is contagious! Thank you so much for creating all this content

[@cookiemonster4074]

Thanks man, you saved my project! I was searching for this for hours with no results then, I came across your video which helped a lot! WARNING: This video only demonstrates version 5 of React-router-dom.. if you installed version 6 it has different syntax

[@craigjohnson8279]

This video is amazing! I love that you code everything from scratch. I like that you do four space indentation. IMO it's easier to read than two-space indentation. I love that you use pure CSS and not some CSS/Framework. Coding along we can see how everything works together. Keep up the excellent job! :)

[@ufotofu9]

Why I love Dev-Ed

[@marieviadieu6483]

I just LOOOOOOVE your videos. You make my studies so much easier. Thank you !

[@BobbyBundlez]

LMFAOOOOO WHEN YOU SAID "this is the part of development that makes me feel... alive"... im DYING. i know man its so dry sometimes lol

[@avivbarel2694]

your enthusiasm makes learning easy thanks

[@MrSegagraff]

The start was a little bit messy, but I liked very much the explanation of the dynamic route, thanks man

[@manuelpineda9067]

Awesome tutorial, man. Very thorough and comprehensive.

[@davidnavarro137]

I remember trying to learn React Router a couple years ago and being completely clueless from other tutorial videos. Thanks for this, it was so straightforward and easy to learn!

[@luisaviles3986]

Same

[@tkssharma]

Here you go Everything about React from Beginner to Advance level kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@narendarsaini5552]

The way you explained is really cool. Keep sharing your knowledge !!

[@daanbreur]

Love Your Videos! ❤️! I learn a lot from them! Thank You So Much!!! ❤️ Edit: OMG Thanks for the heart ❤️❤️

[@tj_yt_]

lol heart is no more

[@matangbr]

The best video for this subject. And your personal notes and presentation adding even more to it. THANKS!

[@apost9019]

In order for 'react-router-dom' to work I had to first install it... If you have this problem just open the terminal (on your project's folder) and run 'npm i react-router-dom'.

[@KalleZz_]

Well, he tells us to install it in the beginning :D

[@apost9019]

@@KalleZz_ oh I didn't notice it :P

[@criaturaimaginaria5230]

router DOM: 7:16 router: 8:30 route: 9:01 switch: 12:00 link: 15:00

[@sebastienmorin9020]

Your content is SOOOO GOOD! Your teachings are great, you have personality and it's genuinely entertaining to watch. Learning ReactJS is going to be way more fun with your channel to help understanding the basics. Thank you very much for your work.

[@christineluo2876]

Thank you so much for this video tutorial 😭I was having lots of trouble figuring out how to access the query parameters yesterday, if only I had found this tutorial last night it would've saved me a lot of trouble 😭

[@NaveenKumar-xq6ce]

This is probably the useful 30 minutes i have ever spent on You tube. Thank you Ed.

[@sohrabch]

give this guy a medal . Although fast paced but completely understandable :)

[@phuongnamnguyen8347]

good video,it's worthy 30min, I understood almost everything, tks so much

[@jackohara9701]

Love the video! Anyone coding along don't forget to wrap the Route lines in a Routes. I didn't at first and none of the components were showing up. Also watch where you put the divs lol

[@jackohara9701]

this video got me unstuck: kzbin.info/www/bejne/mWPKg2Swd9qGjJI. It's not in English but you can see what the guys does and follow it easily (I could follow it and don't even know what he was saying haha)

[@katekitiya8632]

You are awesome! This is exactly what I need for my project. Thank you so much.

[@meetshah4432]

You know that you have got a fantastic teacher when he makes you laugh.

[@vibelover5444]

just watched this video for 6 times.. i literally got 20% of understanding.. will watch more and more times to get 100% understanding

[@pyloolex]

9 month ago, what is progress? How many times have you watched that?

[@vibelover5444]

@@pyloolex did couple of projects now, so much to learn, not finding difficult but learning is fun

[@ibtissamchabiba]

It's Awesome! The way you go through all the details !!!

[@maisql1264]

Thanks for a fun pedagogical tutorial :D This makes me want to learn react even more!!

[@lunatite6451]

Tysm I fully understand how to use Routing in my React App now because of your tutorial.

[@yitzchaksviridyuk932]

"Easy squeezy lemon squeezano" .... I lost it there 😂😂

[@tkssharma]

Here you go Everything about React from Beginner to Advance level kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@TUITKRISHNAKUMAR]

Yeah 😂.. Its easy peasy i guess

[@greegeo]

wow, great video! good pace, well planned out, very clear and to the point!

[@the-og-testudo]

Awesome tutorial! FYI - the API you're using in this example now returns "access denied."

[@soheebae213]

i am going through all of your video that is relevant to REACT!!! You are amazing as usual! :)

[@athleticed9753]

The API is different now. In order to do it you can write the following: 1. Shop.js - const data = await fetch('fortnite-api.theapinetwork.com/upcoming/get'); - setItems(items.data); - {item.item.name} 2. ItemDetail.js - const fetchItem = await fetch(`fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`); - setItem(item.data.item); - {item.name} -

[@malikasultanova9950]

Thank you

[@alexzajacek518]

while following his tutorial I had a ,ype error with using items.map items.data worked. before i lost all my work on codesandbox i couldnt figure out how to map through and return all the names like he did at first in his first fetch call in shop.js how would you have done it?

[@HashtagObi]

thank you so much YOU ARE THE COOLEST TEACHER IN THE WORLD!

[@hevertonvpMrwriters]

Thanks from brazil! You're the only who made me undertand this

[@codebasic8558]

You are just about the most awesome youtuber out there. And I will not switch my mind

[@NazgulAgibaeva]

Thank you so so so much for the tutorial! You made it easy to understand and actually use router!

[@amishpapneja23jan]

Great video, you saved my project at my job. Really appreciate it

[@ganeshram580]

The most practical 30 mins of my life

[@WinterbearMeow]

Hey Ganesh! is there any way i could connect with you on LinkedIn?

[@arooly]

The video is excellent, very clear and simple presentation of react router. Thx.

[@GreatAdib]

Great job 👍 the best tutorial on router!

[@karimkazia]

Thank you ! you just answered a lot of questions that I had which was bothering me.!!!!

[@sanghvian]

Came. Liked. Watched. Learnt. Loved

[@zamanEhsani]

watched your video and it helped me to learn react router. thank man

[@liorberman7240]

This tutorial is absolutely amazing! Thank you so much

[@zaketheboss4763]

Brilliant teacher! It's like you were born for this

[@sipry7274]

Best tutorial on the internet of this topic !!!!!!

[@beladonna5138]

Damn cant believe i learned in 30min routing. youre great thanks !!!

[@michaelseman1247]

great video, its is informative with some light hearted humor sprinkled in, my favorite part was.. "object is an array of objects... inception", just thought that was a funny reference. Thanks!

[@mezianefraga1246]

God bless you, you made React routes much easier

[@gicly8074]

Thank you for breaking it in parts and making very easy to understand. What's the VSCode theme that you use? It's nice!

[@emrecancakroglu4416]

I mean Dev Ed's channel is precious.

[@dychkos]

I am from Ukraine and i am not good in English , but your`s tutorials are so helpful for me. Thank you!