React Router Tutorial | React For Beginners
Вставка
- Опубліковано 7 лют 2025
- 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 - Наука та технологія
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.
Also make sure that the element is JSX i.e. element={}
Way to helpful thank you
this comment and answer by Chimwemwe removes the bug... Thank you guys
wow thanks!
I hope Ed would see this.
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!
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?!!
His explanations are always amazing.
yes exactly ... +1
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!
If you guys understand that, why I can reach each page separately by refreshing, but cant reach from about "/about" to home dir "/" back.
These videos made me buy his courses, they are absolutely amazing
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.
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.
@@aluuusch your problem not his
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!
Swear! Like you are totally right my man, this dude is awesome.
Exactly! Every other video out there for tutorials are droning.
I dunno man, by 0:32, I was too annoyed to continue, so I'm moving on to the next search result.
Same, I love Ed, I would choose to watch him over anyone else because his voice has more than one setting
@@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...
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!
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
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.
Totally agreeeeeeeeeee hahahaha!!
True said... making simple to understand
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
thanks! Coming from theodinproject and this is very relevant
Yes you are right
Thanks this helped!
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?
Thanks big time
This guy is a legend.. Thanks for the wonderful tutorial, I've learned a lot from you than my college professor.
I could relate to this !!
Your college teaches React??
Here you go Everything about React from Beginner to Advance level
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
@@nirmitjatana1245 yes they do, from it's history to it's application on the real world.. And we didn't learn anything 😅
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
Thanks Ed, wonderful video...
very informative.. and to the point...
your 30min video saved my 3hrs to study, understand and implement the topic....
**UA-cam recommendation**: ...
After 5 seconds:
- I am react developer now
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!
Same
Here you go Everything about React from Beginner to Advance level
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
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!
Magic of this video is that not only you teach us but also have fun with all the work and little mistakes you do
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
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.
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)
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! :)
Why I love Dev-Ed
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
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
Literally no one, no one can teach programming with this ease and fun..
You are the best ED ...
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.
I've watched like 3-4 videos on Routing, and no one, absolutely no one, made it this easy to understand! :)
Thank You Ed!! :)
This is probably the useful 30 minutes i have ever spent on You tube. Thank you Ed.
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!
Stop it! You're making me laugh out loud at work! XD
he is impressive first tutorial to enjoy
All you need for React
Formik for building Forms
ua-cam.com/video/3xMiK5mVBpM/v-deo.html
React functional Hooks
ua-cam.com/video/HmOw-45vg80/v-deo.html
React JS Full Course
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
This guy is a legend 😂
I want to be able to laugh at work one day 😔
It's good explanation....
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 UA-camr
"easy peasy lemon squizanno" is the new abracadabra lol great tutorial!
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.
Your "Hey, Google..." set off my Google Home telling me about the weather today
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.
Please keep showering your knowledge . Great tutorial. Great voice and your communication skills keeps enjoying the crowd while learning :)
It is more important that how you are presenting the demo rather than how much you are presenting. Fabulous presentation.
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.
I am Vietnamese. After I watched this video, I realized that English skills are really important. It's really helpful!!!
the world is so blessed to have people like Ed :)
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.
just watched this video for 6 times.. i literally got 20% of understanding.. will watch more and more times to get 100% understanding
9 month ago, what is progress? How many times have you watched that?
@@ishandlechangenotworking did couple of projects now, so much to learn, not finding difficult but learning is fun
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!
The start was a little bit messy, but I liked very much the explanation of the dynamic route, thanks man
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.
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
eh. funny guys often got some deep pain lol. he makes dark jokes if u listen carefully lolololol
i literally completed 50 % of my assignment from this one single video,, thanks a lot.
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.
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.
You are awesome! This is exactly what I need for my project. Thank you so much.
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 UA-cam seas...
Thanks for a fun pedagogical tutorial :D This makes me want to learn react even more!!
Probably the best React router tutorial I have ever come across.So much energetic you are man !! Hats off !!
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
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
Me: ditches uni lectures because you explain things so much better :)
this is something meaning full, clear crystal explanations. impressive MAN
good video,it's worthy 30min, I understood almost everything, tks so much
The best and most simple React Router tutorial I have done.
"Easy squeezy lemon squeezano" .... I lost it there 😂😂
Here you go Everything about React from Beginner to Advance level
ua-cam.com/video/ZWqfADc-0K8/v-deo.html
Yeah 😂.. Its easy peasy i guess
This is honestly one of the best tutorials I've watched ever
Shouldn't `` components be inside `` and not the other way around? Just saying. 😜
It's a react thing...
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.
Love Your Videos! ❤️! I learn a lot from them! Thank You So Much!!! ❤️
Edit: OMG Thanks for the heart ❤️❤️
lol heart is no more
This is Ed, the start of the video says it all!
Thanks man!
since the API link has updated so add this in your shop.js file
{items.map(item => (
{item.item.name}
))}
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!!
Awesome tutorial! FYI - the API you're using in this example now returns "access denied."
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.❤❤❤❤❤
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}
))}
)
Thanks man 😍
Helpful dude saved my time Thanks
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
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?
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
@@seanbarker4713 did you solved it? I've been dealing with the same problem for two days and still can't solve it :c
@@karsi14_ what I said above should work
@@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:
Ed's videos are just uplifting. If someone ever tries to tell you software development is not fun, direct them here.
Why at 32:20 images field was needed to set to empty?
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.
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'.
Well, he tells us to install it in the beginning :D
@@KalleZz_ oh I didn't notice it :P
This literally saved me from having to retake the entire NuCamp React course. I can't thank you enough!
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...
@ 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.
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).
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.
thank you so much YOU ARE THE COOLEST TEACHER IN THE WORLD!
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}
-
Thank you
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?
You sir, are a great teacher. You make the whole process a joy. Your pleasant voice adds to it
6th?
Ed , can you pls upload the codes
hey dev, the API link doesnot work. How to solve that issue. Thankx
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.
This tutorial is outdated everyone
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.
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!
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
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
The best video I have ever seen regarding React-Router! Thank you so much!
Dude, thank you so much for create this content! I was figthing with routers for a week. You save my life Ed.
God damnnn, Cristal clearly, visibly, transparently and absolutely I now understood the React routing.
Easily the best video explaining how routing in react works. Thank you so much!!!
Before knowing power of routes I was feeling there would be a tough time setting backend but after , it's super clear . Thanks Ed
Man! I am ur fan.It's such an easy explanation of Router.Please make more videos on React.
You're extremely humorous! It is so fun to watch your tutorials!Thank you so so so very much for making:)
"Easy-peasy Lemon Squeeziano".
😁👍
You are making it so easy and effortless! I see life in different colours after your explanation!
I really liked that the workflow goes with actual human intuition!! super easy to understand and very practical. Thanks!!
exactly what i was looking for, well presented and clear, thanks amigo 👍
🍕🍕🍕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!
you are the best big bro the best, no one can be bored taking one of your courses !!!
Your style of teaching is amazing, you just got a new subscriber!
THANK YOU! Finally a good dynamic link tutorial, just what I was looking for.
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!