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.
@chimwemwechinamale67163 жыл бұрын
Also make sure that the element is JSX i.e. element={}
@eshw233 жыл бұрын
Way to helpful thank you
@devanshvashishta3 жыл бұрын
this comment and answer by Chimwemwe removes the bug... Thank you guys
@starriet3 жыл бұрын
wow thanks!
@onilbautista3 жыл бұрын
I hope Ed would see this.
@M4RCi923 жыл бұрын
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!
@daboos85 жыл бұрын
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?!!
@alizalakhani73005 жыл бұрын
His explanations are always amazing.
@vickyrocks65604 жыл бұрын
yes exactly ... +1
@preciousadeyinka27864 жыл бұрын
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!
@GiorgiGvimradze14 жыл бұрын
If you guys understand that, why I can reach each page separately by refreshing, but cant reach from about "/about" to home dir "/" back.
@paucolome42984 жыл бұрын
These videos made me buy his courses, they are absolutely amazing
@harunguven85813 жыл бұрын
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
@prawnstars31602 жыл бұрын
thanks! Coming from theodinproject and this is very relevant
@adeelnazir25792 жыл бұрын
Yes you are right
@slashg59082 жыл бұрын
Thanks this helped!
@JaredTerryFAM1LYGUY2 жыл бұрын
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?
@gagandeepv70342 жыл бұрын
Thanks big time
@huntershaw58805 жыл бұрын
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!
@preciousadeyinka27864 жыл бұрын
Swear! Like you are totally right my man, this dude is awesome.
@dpraveenk384 жыл бұрын
Exactly! Every other video out there for tutorials are droning.
@RonWarnerBubbleKing4 жыл бұрын
I dunno man, by 0:32, I was too annoyed to continue, so I'm moving on to the next search result.
@fullmetaljacket18034 жыл бұрын
Same, I love Ed, I would choose to watch him over anyone else because his voice has more than one setting
@TigerByteID4 жыл бұрын
@@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...
@kittjosef4 жыл бұрын
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.
@aluuusch2 жыл бұрын
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.
@chikomedia Жыл бұрын
@@aluuusch your problem not his
@anjepnjr29955 жыл бұрын
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
@newthepanch5 жыл бұрын
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.
@jaywantjagtap91863 жыл бұрын
Totally agreeeeeeeeeee hahahaha!!
@varshinigurumurthy21413 жыл бұрын
True said... making simple to understand
@alexbkf4 жыл бұрын
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!
@bryanperryruiz46355 жыл бұрын
This guy is a legend.. Thanks for the wonderful tutorial, I've learned a lot from you than my college professor.
@gokulambalavanan35924 жыл бұрын
I could relate to this !!
@nirmitjatana12454 жыл бұрын
Your college teaches React??
@tkssharma4 жыл бұрын
Here you go Everything about React from Beginner to Advance level kzbin.info/www/bejne/kIjUl3R6mJJjgZo
@bryanperryruiz46354 жыл бұрын
@@nirmitjatana1245 yes they do, from it's history to it's application on the real world.. And we didn't learn anything 😅
@jjmajano47794 жыл бұрын
i wasted hours looking other devs but no one do and explain this basic but real life exercise better than you in this video, easy to understand. Thank you!
@ankurharna15 жыл бұрын
Thanks Ed, wonderful video... very informative.. and to the point... your 30min video saved my 3hrs to study, understand and implement the topic....
@liam_iam4 жыл бұрын
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.
@davidnavarro1375 жыл бұрын
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!
@luisaviles39865 жыл бұрын
Same
@tkssharma4 жыл бұрын
Here you go Everything about React from Beginner to Advance level kzbin.info/www/bejne/kIjUl3R6mJJjgZo
@knwoledgeseeker3812 жыл бұрын
Resoect to all programmers out there teaching us through tutorials , but Dev Ed teachings are in another level, straight to the point and extremly simple.... thanks Ed hats off to you
@kamila_nowak4 жыл бұрын
Magic of this video is that not only you teach us but also have fun with all the work and little mistakes you do
@wtfdoiputhere3 жыл бұрын
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
@ahmedaminedev4 жыл бұрын
**KZbin recommendation**: ... After 5 seconds: - I am react developer now
@sandeepsoni72694 жыл бұрын
Literally no one, no one can teach programming with this ease and fun.. You are the best ED ...
@elineoosterloo35555 жыл бұрын
Stop it! You're making me laugh out loud at work! XD
@pastoroniasmunetsi4 жыл бұрын
he is impressive first tutorial to enjoy
@tkssharma4 жыл бұрын
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
@knivessurvives4 жыл бұрын
This guy is a legend 😂
@ErickG3 жыл бұрын
I want to be able to laugh at work one day 😔
@abhikulkarni53463 жыл бұрын
It's good explanation....
@marcosc91303 жыл бұрын
Man you are a legend, I've studied for literally dozens of hours, got confused on a lot of stuff. Then in a few videos, not even 2 hours total of time I managed to learn everything that I couldn't before ( hooks, props, routers, redux and how to build a Todo list with ease)
@NaveenKumar-xq6ce3 жыл бұрын
This is probably the useful 30 minutes i have ever spent on You tube. Thank you Ed.
@DrHappybone3 жыл бұрын
That legit blew my mind. I needed the first 10 minutes to figure out how to do basic routing, I stayed for the rest and now my brain is on fire with ideas lol
@cuerdasn4 жыл бұрын
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
@krishangsharma21853 жыл бұрын
I've watched like 3-4 videos on Routing, and no one, absolutely no one, made it this easy to understand! :) Thank You Ed!! :)
@craigjohnson82795 жыл бұрын
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! :)
@ufotofu95 жыл бұрын
Why I love Dev-Ed
@Rinkiarimo4 жыл бұрын
My good man, you have no idea how much it means to me that I have found your tutorial. I've been at work for two days trying to figure out how to do this. I was at my wits' end on why I could access all my data, but not one by Id. You have my eternal gratitude! Have my like, have my subscription! HAVE EVERYTHING! Thank you!
@commandpost15 жыл бұрын
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.
@mehmetnadi89304 жыл бұрын
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
@chrisneal63743 жыл бұрын
"easy peasy lemon squizanno" is the new abracadabra lol great tutorial!
@nmsnt4 жыл бұрын
It is more important that how you are presenting the demo rather than how much you are presenting. Fabulous presentation.
@TheBilalblanco4 жыл бұрын
the world is so blessed to have people like Ed :)
@farhanqureshi88114 жыл бұрын
How on earth was I able to get such good quality teaching video for free when everyone else is ripping off. I cant express how much respect I have for this guy.
@connoroverby88685 жыл бұрын
Your "Hey, Google..." set off my Google Home telling me about the weather today
@asifmahmood38044 жыл бұрын
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.
@vibelover54444 жыл бұрын
just watched this video for 6 times.. i literally got 20% of understanding.. will watch more and more times to get 100% understanding
@ishandlechangenotworking4 жыл бұрын
9 month ago, what is progress? How many times have you watched that?
@vibelover54444 жыл бұрын
@@ishandlechangenotworking did couple of projects now, so much to learn, not finding difficult but learning is fun
@ravapps_itltd28194 жыл бұрын
Very good developer - I was making a test application for a client to show my skills and I had no experience in React Js. I was totally confused on one thing and solution was switch tag and exact attribute. I learnt it. It helped. Thank you very much.
@bhavinshah42575 жыл бұрын
Please keep showering your knowledge . Great tutorial. Great voice and your communication skills keeps enjoying the crowd while learning :)
@24framesofcaspian803 жыл бұрын
i literally completed 50 % of my assignment from this one single video,, thanks a lot.
@sebastienmorin90204 жыл бұрын
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.
@BharatSingh-zk8lx4 жыл бұрын
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.
@MrSegagraff5 жыл бұрын
The start was a little bit messy, but I liked very much the explanation of the dynamic route, thanks man
@faizansaleem44234 жыл бұрын
I am a beginner in React and was looking for more concepts to learn then I came across this video and gave an instant like just for that intro. Explanation was really helpful. Keep it up! This is an appreciation for how you guys help the community.
@OmPrakash-ot3nr3 жыл бұрын
Why at 32:20 images field was needed to set to empty?
@f4fred4 жыл бұрын
My next video I was going to check up on was setting up the API with Router and BOOM there it was included. This tutorial is PERFECT. Thank you!
@AhmedKhaledCH35 жыл бұрын
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
@BobbyBundlez4 жыл бұрын
eh. funny guys often got some deep pain lol. he makes dark jokes if u listen carefully lolololol
@thecoderabbi2 жыл бұрын
This is Ed, the start of the video says it all! Thanks man!
@maisql12644 жыл бұрын
Thanks for a fun pedagogical tutorial :D This makes me want to learn react even more!!
@Lelouchvv3 жыл бұрын
I am Vietnamese. After I watched this video, I realized that English skills are really important. It's really helpful!!!
@amanagarwal78495 жыл бұрын
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.
@nirmalyaganguly21774 жыл бұрын
Probably the best React router tutorial I have ever come across.So much energetic you are man !! Hats off !!
@katekitiya86325 жыл бұрын
You are awesome! This is exactly what I need for my project. Thank you so much.
@samuelbassey4174 жыл бұрын
This is honestly one of the best tutorials I've watched ever
@hm89095 жыл бұрын
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?
@seanbarker47135 жыл бұрын
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_5 жыл бұрын
@@seanbarker4713 did you solved it? I've been dealing with the same problem for two days and still can't solve it :c
@seanbarker47135 жыл бұрын
@@karsi14_ what I said above should work
@karsi14_5 жыл бұрын
@@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:
@StefanRows4 жыл бұрын
The best and most simple React Router tutorial I have done.
@jakubkoj15 жыл бұрын
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.
5 жыл бұрын
I ask myself same question...
@theSwift7155 жыл бұрын
@ 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.
@Colstonewall5 жыл бұрын
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).
@_rachid4 жыл бұрын
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.
@taylor96544 жыл бұрын
Panicked because I was deep into my personal website project and realized I didn't account for creating multiple pages for multiple projects but I think this video just gave me the key to the solution. Mine is way simpler than what you created in the video but still insanely helpful
@phuongnamnguyen83475 жыл бұрын
good video,it's worthy 30min, I understood almost everything, tks so much
@padamsubba19734 жыл бұрын
God damnnn, Cristal clearly, visibly, transparently and absolutely I now understood the React routing.
@BobbyBundlez4 жыл бұрын
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
@mscodez69004 жыл бұрын
this is something meaning full, clear crystal explanations. impressive MAN
@vricop5 жыл бұрын
Shouldn't `` components be inside `` and not the other way around? Just saying. 😜
@pick25984 жыл бұрын
It's a react thing...
@flokipanda3 жыл бұрын
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.❤❤❤❤❤
@dawnjinx49624 жыл бұрын
Me: ditches uni lectures because you explain things so much better :)
@TheDarknessDragon3 жыл бұрын
You have a very special gift of making people understand anything that you want them to. It's not some sort of special power, but you have the ability to make allies of everyone you meet. And that is the most fearsome ability on the high KZbin seas...
@yitzchaksviridyuk9324 жыл бұрын
"Easy squeezy lemon squeezano" .... I lost it there 😂😂
@tkssharma4 жыл бұрын
Here you go Everything about React from Beginner to Advance level kzbin.info/www/bejne/kIjUl3R6mJJjgZo
@TUITKRISHNAKUMAR4 жыл бұрын
Yeah 😂.. Its easy peasy i guess
@martenra3 жыл бұрын
Ed's videos are just uplifting. If someone ever tries to tell you software development is not fun, direct them here.
@daanbreur5 жыл бұрын
Love Your Videos! ❤️! I learn a lot from them! Thank You So Much!!! ❤️ Edit: OMG Thanks for the heart ❤️❤️
@tj_yt_5 жыл бұрын
lol heart is no more
@DiestroCorleone2 жыл бұрын
Even with the outdated components, still the best introductory video I've seen on Router so far. Plus, the comment section plus the documentation (read the docs, always) managed to keep this video useful, especially to understand the principles of this library.
@the-og-testudo5 жыл бұрын
Awesome tutorial! FYI - the API you're using in this example now returns "access denied."
@thecoderabbi2 жыл бұрын
🍕🍕🍕IN SIMPLE TERMS(as of today March 2, 2022), 🌭 import { Switch } from ‘react-router-dom’ IS NOW import { Routes } from ‘react-router-dom 🍩 IS NOW 🍗'Switch' is 'Routes', exact is not needed(added by default), 'component' is now 'element', and its value is now in jsx format Thanks again Ed!
@TheShiwanthasr4 жыл бұрын
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} ))} )
@gouravmajee99133 жыл бұрын
Thanks man 😍
@basic-bhargav62482 жыл бұрын
Helpful dude saved my time Thanks
@jtmlmass3 жыл бұрын
Amazing tutorial! Loved how I learned some details there aside from Router like the image empty so that it changes as soon as it loads.
@bismajamil32524 жыл бұрын
since the API link has updated so add this in your shop.js file {items.map(item => ( {item.item.name} ))}
@wawayltd4 жыл бұрын
"Easy-peasy Lemon Squeeziano". 😁👍 You are making it so easy and effortless! I see life in different colours after your explanation!
@apost90195 жыл бұрын
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_5 жыл бұрын
Well, he tells us to install it in the beginning :D
@apost90195 жыл бұрын
@@KalleZz_ oh I didn't notice it :P
@valencia375x3 жыл бұрын
Easily the best video explaining how routing in react works. Thank you so much!!!
@athleticed97533 жыл бұрын
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} -
@malikasultanova99503 жыл бұрын
Thank you
@AlexHaxxz3 жыл бұрын
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?
@kittnlogic4 жыл бұрын
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!!
@developedbyed5 жыл бұрын
6th?
@bhatnagarcapital4 жыл бұрын
Ed , can you pls upload the codes
@chandrakantnyaupane52654 жыл бұрын
hey dev, the API link doesnot work. How to solve that issue. Thankx
@jaytran2474 жыл бұрын
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.
@chonguchannel3 жыл бұрын
This tutorial is outdated everyone
@johnfrancisco67364 жыл бұрын
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.
@Ghxul_4 жыл бұрын
I'm a bootcamp student currently limping my way through our React unit and holy shit you just saved my life right now the day before tomorrow's coding challenge. I ACTUALLY GET UNDERSTAND HOW TO RENDER DATA NOW THANK YOU AJFFIAHRIUHJKRFEHNRGWERG
@cookiemonster40743 жыл бұрын
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
@yungdevstudio3 жыл бұрын
this was really helpful thank you...I got lost at a point when I was trying to implement it on a site I'm working on and this put me on track
@walkman48282 жыл бұрын
The most crystal clear tutorial for React Router!
@Four_Eyes3 жыл бұрын
exactly what i was looking for, well presented and clear, thanks amigo 👍
@DasomWon4 жыл бұрын
I really liked that the workflow goes with actual human intuition!! super easy to understand and very practical. Thanks!!
@CMGM553 жыл бұрын
You sir, are a great teacher. You make the whole process a joy. Your pleasant voice adds to it
@sanmeetsingh43 жыл бұрын
Before knowing power of routes I was feeling there would be a tough time setting backend but after , it's super clear . Thanks Ed
@elijahhenderson59553 жыл бұрын
This literally saved me from having to retake the entire NuCamp React course. I can't thank you enough!
@shineLouisShine Жыл бұрын
Thank you for everything. Mostly about your approach, which helps me to concentrate (where other content creators fail). With that being said - React V.6 definitely has enough changes to justify an update video. Staying always update might be exhausting but it usually worth it... Anyway, you got a new subscriber. Good luck and all!
@gsalazarmusic3 жыл бұрын
Dude, thank you so much for create this content! I was figthing with routers for a week. You save my life Ed.
@1N23454 жыл бұрын
that was basically all i needed to get started on react coming from VueJs. going typescript too but should be similar :) thnx a lot. way more info than expected (like the hooks thing), even covered fetch. for a beginner thats an outstanding tuto!
@lolashepota40503 жыл бұрын
The best video I have ever seen regarding React-Router! Thank you so much!
@taheraalam51563 жыл бұрын
You're extremely humorous! It is so fun to watch your tutorials!Thank you so so so very much for making:)
@NoudvD633 жыл бұрын
I didn't stare at the ceiling once! Amazing tutorial. Academy Award for best short foreign film.
@aginamabednego2 жыл бұрын
You made learning react router super easy. Thank you
@calarcher48692 жыл бұрын
THANK YOU! Finally a good dynamic link tutorial, just what I was looking for.
@kritikasrivastava49784 жыл бұрын
Man! I am ur fan.It's such an easy explanation of Router.Please make more videos on React.