Тёмный

React Router Tutorial for Beginners - Navigation, Multiple Pages etc. 

Shanjai Raj
Подписаться 3,6 тыс.
Просмотров 7 тыс.
50% 1

This is a React router tutorial using react router navbar and also react router for multiple pages, and react router explained in 2020. In this video I will be showing you how to use React router. React router is basically navigation components which help to navigate through pages without having to refresh the browser, thus making it a single page application. I will be showing you how to use react router, and it's components which are react router route, react router switch, react router link.
I will also be showing you how to use react router by dividing the use of components into further components such as using a Navbar instead of hardcoding in the `App.js`
*Timestamps:*
0:00 Intro
2:24 Installing React router
3:24 Importing React Router Components
3:50 Intro to Router, Switch and Link
5:50 Intro to Route
8:00 Content into Components
11:24 Conclusion
**Help the channel out if you got value -**
Subscribe - bit.ly/2UZV3KT
Leave a like for others to see this video and get value as well
**Watch my React tutorials -**
Playlist - bit.ly/3fXQedj
Thanks for watching and don't keep waiting for the next video and subscribe and turn on notifications to get notified every time I upload a brand new video.
About me -
I am Shanjai raj. I love to code and I am a Junior front end web developer.
If you have any questions, leave them in the comments, I'll answer all of them (I promise)
HK---

Опубликовано:

 

30 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@DRocksRecords
@DRocksRecords 3 года назад
You teach better than some older people good job and thanks for the demo
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Thanks a lot man👍.
@FeralBoyKnives
@FeralBoyKnives 3 года назад
Great job, this is exactly what I was looking for.
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Thanks a lot man👍👍
@photo-skills
@photo-skills 3 года назад
Awesome work, clear tutorial!
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Thanks a lot!
@jwalk121
@jwalk121 3 года назад
Awesome, a 9 year old just taught me!
@ShanjaiRaj
@ShanjaiRaj 3 года назад
😂😂 No actually, I am 18, I hope that's fine
@soosplays2306
@soosplays2306 2 года назад
@@ShanjaiRaj you are 16
@jonatapereira9219
@jonatapereira9219 3 года назад
Hi from Brazil! Thank you for that video. :)
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Ow, thanks a lot. I am glad it helped you
@chetan_nada
@chetan_nada 2 года назад
great teaching.
@GMERT
@GMERT 2 года назад
Please can you make a video on linking thank you page to emailjs code. I have been having issues with that for more than 3weeks and no video of that nature on youtube.
@code.badger
@code.badger 3 года назад
Thanks for the tutorial you have earned a subscriber
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Thanks. Please let me know any video you might want, I am looking for ideas. Thanks for the subscribe and for reply
@code.badger
@code.badger 3 года назад
@@ShanjaiRaj That would be great If you could make a video on how to build a website's Navbar that navigate to other pages using React router and Material UI
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Yeah sure I'll do a video on that, thanks for the idea
@dustyfrypan
@dustyfrypan 3 года назад
Doing a good job kiddo. A couple of points. You should have just a single Switch component, otherwise it defeats the purpose of using Switch. Switch should only have Route or Redirect as it's children. Have a look at the documentation for such examples. All the best. Keep up the work!
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Thanks a lot. I am happy reading your comment. Thanks for letting me know the mistakes.
@mukeshmaurya6967
@mukeshmaurya6967 3 года назад
Giddy Up, I am looking for this info.
@ShanjaiRaj
@ShanjaiRaj 3 года назад
😅😅
@hsuan561
@hsuan561 3 года назад
well done
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Thanks a lot man
@niteshkhatri88
@niteshkhatri88 2 года назад
How to hide components with header and footer on login page and registration page?
@puranjaysen
@puranjaysen 3 года назад
4:55 How to you write both "about" at the same time ?
@ibrahimdua
@ibrahimdua 3 года назад
In VS code, press Alt + leftclick to place the cursor at multiple places at the same time.
@willturner3440
@willturner3440 3 года назад
Lots of love from California, Btw what's your age dude..
@prod.kashkari3075
@prod.kashkari3075 3 года назад
This is great, but why couldn’t u make a Jsx file for all of ur components, one which renders the “App.jsx” and within the app you have all your switch and links? Just confused as to why you had all js files
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Yeah that's also a way of doing it. But actually when you are making projects using React, you have to divide it into it's own component and have it in a folder, so just for that only I structured the files like that. For naming the files, you could also name the file App.jsx or App.js that is the same. The way you said is also right, but also consider clean code. Thanks for the comment 👍. Hope this solves the question
@prod.kashkari3075
@prod.kashkari3075 3 года назад
Shanjai Raj thanks, I’m a beginner I finished a module on React a couple days ago so I’m still learning.
@ShanjaiRaj
@ShanjaiRaj 3 года назад
@@prod.kashkari3075 Oh that's good. Good luck . If you have any doubts, let me know, I'll try and help you out if i can
@prod.kashkari3075
@prod.kashkari3075 3 года назад
Shanjai Raj sounds good going to sub
@ShanjaiRaj
@ShanjaiRaj 3 года назад
@@prod.kashkari3075 Thanks a lot 👍👍👍
@anuj7286
@anuj7286 3 года назад
Hey bro how old are you? Btw you have a very good knowledge & thanks for the tutorials & keep going 👍
@anuj7286
@anuj7286 3 года назад
Leave it bro, i know your age. You're great man!!
@ShanjaiRaj
@ShanjaiRaj 3 года назад
Hey, thanks
@TheWandererDoc
@TheWandererDoc 3 года назад
how old are u bro, btw u can also put
@ShanjaiRaj
@ShanjaiRaj 3 года назад
HI bro, I am 15. Yeah thanks, you could do that as well. I did forget that, let me pin it for people to take a look at it. Thanks.
@prod.kashkari3075
@prod.kashkari3075 3 года назад
Do you still need to specify a path
@prod.kashkari3075
@prod.kashkari3075 3 года назад
Along wirh the path
@ShanjaiRaj
@ShanjaiRaj 3 года назад
@@prod.kashkari3075 I think yes, but I am not quite sure about it. Anyway for more reference just check the docs - reactrouter.com/web/guides/quick-start
Далее
The Story of Next.js
12:13
Просмотров 532 тыс.
this stop is #IROHA #이로하 #ILLIT #아일릿
00:10
Просмотров 999 тыс.
Big Mouse 😂
00:13
Просмотров 56 тыс.
Programming Is NOT Enough | Add these 7 skills…
13:19
React Router in Depth #4 - Nested Routes & Layouts
11:22
Animated Responsive Navbar Tutorial
22:10
Просмотров 1 млн
Learn React Hooks: useCallback - Simply Explained!
17:15
Nested Routes (Outlet component) Using React Router.
17:42
ES6 Tutorial: Learn Modern JavaScript in 1 Hour
50:05
Просмотров 967 тыс.
this stop is #IROHA #이로하 #ILLIT #아일릿
00:10
Просмотров 999 тыс.