Protected Routes in React | Router Redirect | React Router Dom | React Tutorial for Beginners

Подписаться 83 тыс.

Просмотров 46 тыс.

50% 1

In this video we are going learn about protected routes in React Js. We will see how we can use React Router Dom package and create protected routes to restrict the user to see certain components in our website if they are not authenticated.
We will create fake authentication using custom React Hook and pass it to Protected route based on authentication we will restrict user to access component and redirect to Home component.
**Github link for Reference**
github.com/dma...
⭐️ Support my channel⭐️
www.buymeacoff...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React Fundamentals Project - • Learn React JS Fundame...
Learn React Redux with Project - • Learn React Redux with...
**Checkout these video to understand better**
JavaScript this Keyword - • JavaScript this Keywor...
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
**More videos**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my crash courses for get started with web development**
JavaScript Tutorial For Beginners | Part 1 - • JavaScript Tutorial Fo... JavaScript Tutorial For Beginners | Part 2 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 3 - • JavaScript Tutorial Fo...
JavaScript Tutorial For Beginners | Part 4 - • JavaScript Tutorial Fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- React Protected Routes
- React Router DOM
⭐️ Hashtags ⭐️
#React #ReactRouter #ProtectedRoutes #Beginners#Tutorials
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

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

11 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 90

@awuk3468 2 года назад

This is one of the most clear and concise tutorials on how to do protected routes within React, thank you Dipesh!

@DipeshMalvia 2 года назад

Glad it was helpful!

@Taha2613 2 года назад

So many videos are there , but this one gave the clear idea about how to make this work. Great job man, Thank you for this and keep making such videos.

@blacksheep1337 3 года назад

Thanks for the content Dipesh Greetings from Brazil!

@chitrangadapradhan5535 2 года назад

I watched a lot of videos on this concept and this one is the best. Good job there!

@DipeshMalvia 2 года назад

Thanks Chitrangada!

@mathis-meth4229 2 года назад

this guy talks really on point concepts i like your approach. keep up the good work

@hiteshsuthar1097 3 года назад

Hope this React playlist would be best series covering from beginner to advanced topics as Akshay Saini's namaste javascript series.

@IshanKesharwani 2 года назад

I just need a rewatch but I actually understood most of it. Thanks for this.

@SamruddhaShah 3 года назад

Thanks

@Niamudeen Год назад

You always kill it bro. 🔥🔥🔥

@kevinrayparas3094 Год назад

is this still worth to use for routing on react latest version?

@ShanakaMadhushan-cw8rh Год назад

Thank you brother ... your explanation is very clear... ❤️🍻

@MrBeastFan_Gyak Год назад

hey, if I already logged in why I need to see unprotected pages , I mean for example I logged in and I do not want to see login page again when I go /login

@Serj1c 3 года назад

Thumbs up! keep up with the great job)

@DipeshMalvia 3 года назад

Thank you! Cheers!

@dilshadahmad8486 Год назад

great explanation Dipesh bro

@adeshgangwar3555 3 года назад

Every video is same related to protected route. Bro can you please show us the real time Authentication and how to handle routes with token. It would be very helpful Thanks :)

@DipeshMalvia 3 года назад

Sure. Noted!

@yosimaday9302 2 года назад

You are amazing. many thanks.🙏

@DipeshMalvia 2 года назад

Welcome!

@vhsphshbs 3 года назад

Great content. Do make one video daily

@DipeshMalvia 3 года назад

Not really I usually make 2 videos per month

@BachelorsEntertainer 2 года назад

You are such a legendary ❤️

@AvdheshKumar-sm5hl 2 года назад

Very helpful

@mohammadrakib2809 2 года назад

Really Helpfull sir, thank you !

@facemeifucanyt7997 3 года назад

Great content bro..please do video on nested routes also... It will be help full when app has more nested routes and facing many problem on persisting active link for nested routes.

@IT_FoodLover 3 года назад

Thanks for making this video 🙏

@DipeshMalvia 3 года назад

My pleasure 😊

@IT_FoodLover 3 года назад

@@DipeshMalvia sir please react redux login register sir

@marufkhan23508 2 года назад

Simple explanation ✔

@DipeshMalvia 2 года назад

Thanks for liking

@thehkmalhotra9714 2 года назад

What a tutorial Divesh. Thanks a lot for this❤️ . I am having one issue I think new version React Route doesn’t have Redirect in their modules/package… What to do?

@554-manjushriparkhe4 2 года назад

I also have same issue.

@NoumanKhan-ck7vx 2 года назад

anysolution ?

@dincer2f 2 года назад

love you man

@hiteshsuthar1097 3 года назад

Thanks again

@DipeshMalvia 3 года назад

Always welcome!

@thevloglife105 3 года назад

Hi Nice project, But how can hide - components with header and footer in 404 page only? please suggest and help

@mohamedyoussef8835 2 года назад

Awesome video Great explanations +++++++++++++++++++++ 😃

@DipeshMalvia 2 года назад

Thanks again!

@rahulshetty3849 Год назад

Thank you❤

@DipeshMalvia Год назад

Welcome!

@S4LTYT 3 года назад

Bro please make videos on REDUX-PERSIST. how to persist redux store. how to setup persist .also make videos on usefull react libraries

@JaLegendsDance 3 года назад

hey can you make a react js tutorial of an video player that changes the video source of an video. A button activates this function. whitch interchange the video every time I click the button, when i click the button, can the video load at the same time the previous video was playing? There are 2 videos of the same length.

@coolgirlsharu 5 месяцев назад

Hi Dipesh , i have 26 pages / 26 routes , what is the solution how can i protect routes without user authenticate?

@sandipbamaniya8559 2 года назад

I'm using react-router-dom 6 switch is not working router.ts:5 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a please replay

@AmitRoy497 3 года назад

Hi, Thanks for these amazing videos. I have a request. I don't know it is valid or not. If you have some time, could you please make a video on JWT.

@DipeshMalvia 3 года назад

Sure, I have got couple of request for video on JWT. I will create a video on this topic.

@AmitRoy497 3 года назад

@@DipeshMalvia thanks for the quick reply.

@likhilchopde5745 3 года назад

One complete project for resume please

@abhinavkulkarni3427 3 года назад

Sir,if a user is filling form by mistake he has pressed on nav bar or some other area how can we get prompt(prevent navigation) are you sure want to leave the page please make a video on this sir

@DipeshMalvia 3 года назад

You can use the Prompt component like this. `Are you sure you want to go to ${location.pathname}` } /> Check the reference link - reactrouter.com/web/example/preventing-transitions

@karthikblswami 3 года назад

I am new to react.. How is the job market for react?. Pls explain

@DipeshMalvia 3 года назад

React is hot skill at the moment.

@gnanavelpandian7756 3 года назад

Some people use pages as folder name for components and some as components. So, actually what's the difference between pages folder and components folder?

@DipeshMalvia 3 года назад

I usually use pages when I have routing implemented in the project.

@mattari97 2 года назад

Pages are the Routes and Components are parts of pages. Its confusing there cause he calls them "HomeComponent" instead of "HomePage"

@akhileshmishra5559 3 года назад

Sir please make firebase and firestore full tutorial and id could possible nodejs and express js full tutorial in future

@Viral_Shorts_v Год назад

is Switch is still valid in Routes??

@DipeshMalvia Год назад

No, you can refer to this video with implements the same in Router v6 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@saurabrakshit405 2 года назад

Whenever I'm putting the ProtectedRoute component inside the Routes component I'm getting error i.e "Uncaught Error: [ProtectedRoute] is not a component. All component children of must be a or " how to overcome this I'm using Router Version 6

@DipeshMalvia 2 года назад

You can refer to my video React Firebase authentication I have used protected routes with react router dom version 6. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@kapilgupta6058 3 года назад

Answer me pls Which is used most in industry nowadays between functional components and class components

@DipeshMalvia 3 года назад

Functional components are the modern way of writing React components as you can do almost everything using FC along with React Hooks and in less number of lines.

@Notyoubiz Год назад

Do you have a v6 tutorial as well? Thanks for the video btw.

@DipeshMalvia Год назад

Please check this for V6 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@seethalramakrishnan2778 2 года назад

Hi, How can set auth status based on access token from backend?

@prasunalakshmi4035 3 года назад

Hi if suppose we have un response website in react how to make it response could please suggest and make vedio

@NaveenKumar-yo7yf 2 года назад

Hi , make some videos on jwt token

@muniralimuhammad16 2 года назад

Can I use this in react router v6?

@DipeshMalvia 2 года назад

Yes, you can use it in React Router DOM v6 but the syntax is bit different - Checkout this video of help - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@ankitrajbhar158 Год назад

Sunder Pichai

@romimaximus 3 года назад

Ok, ate 7:40, im confused about these props " component: component, ... rest ", inside the "ProtectedRoute" component, im trying to understand where are they coming from ? and what they mean ?

@DipeshMalvia 3 года назад

You will pass this when we use the protected component go ahead and you will see when we use this protected component we pass these props..

@romimaximus 3 года назад

@@DipeshMalvia im still trying to understand all thats inside the "ProtectedRoute" component... and trying to understand why you use "Redirect" instead "history.push" ...im still lost..kkkk...i gonna have to watch this a few more 20 times to understand it ..

@singh.aadarsh 2 года назад

I don't understand props where its comes

@ravishankarpal6499 2 года назад

bro make vedio for react router dom v 6 on the same topic

@maxaquilino7264 2 года назад

Good tutorial but does not work on React Router v6

@DipeshMalvia 2 года назад

You can check this video - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html You will see how to implement protected routes with React Router v6.

@alpeshpatel4504 2 года назад

Can you make a video login user using axios and procteced route.

@DipeshMalvia 2 года назад

You can check for Firebase authentication video - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@IT_FoodLover 3 года назад

Sir pls make a video on react redux in login register

@amritakhetwani6070 2 года назад

Need this in V6, because this technique doesn't work in v6

@DipeshMalvia 2 года назад

Already available in my Firebase Authentication video - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@rahulnikam1279 2 года назад

How to do the same thing in React Router Dom V6 plzz help🙏

@DipeshMalvia 2 года назад

Please check my video for firebase authentication I have used protected routes along with react router dom V6. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6kgitEWTxac.html

@rahulnikam1279 2 года назад

@@DipeshMalvia thanks broo💯💯

@DipeshMalvia 2 года назад

Welcome!