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

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ต.ค. 2024

ความคิดเห็น • 90

  • @awuk3468
    @awuk3468 2 ปีที่แล้ว +3

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

  • @Taha2613
    @Taha2613 2 ปีที่แล้ว +1

    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
    @blacksheep1337 3 ปีที่แล้ว +3

    Thanks for the content Dipesh Greetings from Brazil!

  • @chitrangadapradhan5535
    @chitrangadapradhan5535 2 ปีที่แล้ว +2

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

  • @MrBeastFan_Gyak
    @MrBeastFan_Gyak ปีที่แล้ว +1

    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

  • @mathis-meth4229
    @mathis-meth4229 2 ปีที่แล้ว

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

  • @IshanKesharwani
    @IshanKesharwani 3 ปีที่แล้ว

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

  • @ShanakaMadhushan-cw8rh
    @ShanakaMadhushan-cw8rh ปีที่แล้ว

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

  • @hiteshsuthar1097
    @hiteshsuthar1097 3 ปีที่แล้ว +2

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

  • @dilshadahmad8486
    @dilshadahmad8486 ปีที่แล้ว

    great explanation Dipesh bro

  • @Niamudeen
    @Niamudeen ปีที่แล้ว

    You always kill it bro. 🔥🔥🔥

  • @kevinrayparas3094
    @kevinrayparas3094 ปีที่แล้ว +1

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

  • @yosimaday9302
    @yosimaday9302 2 ปีที่แล้ว +1

    You are amazing. many thanks.🙏

  • @SamruddhaShah
    @SamruddhaShah 3 ปีที่แล้ว +1

    Thanks

  • @Serj1c
    @Serj1c 3 ปีที่แล้ว +1

    Thumbs up! keep up with the great job)

  • @vhsphshbs
    @vhsphshbs 3 ปีที่แล้ว +1

    Great content. Do make one video daily

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว

      Not really I usually make 2 videos per month

  • @AvdheshKumar-sm5hl
    @AvdheshKumar-sm5hl 2 ปีที่แล้ว

    Very helpful

  • @BachelorsEntertainer
    @BachelorsEntertainer 2 ปีที่แล้ว

    You are such a legendary ❤️

  • @marufkhan23508
    @marufkhan23508 3 ปีที่แล้ว +1

    Simple explanation ✔

  • @mohammadrakib2809
    @mohammadrakib2809 2 ปีที่แล้ว

    Really Helpfull sir, thank you !

  • @adeshgangwar3555
    @adeshgangwar3555 3 ปีที่แล้ว +2

    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 :)

  • @IT_FoodLover
    @IT_FoodLover 3 ปีที่แล้ว +1

    Thanks for making this video 🙏

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +1

      My pleasure 😊

    • @IT_FoodLover
      @IT_FoodLover 3 ปีที่แล้ว

      @@DipeshMalvia sir please react redux login register sir

  • @thevloglife105
    @thevloglife105 3 ปีที่แล้ว +1

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

  • @thehkmalhotra9714
    @thehkmalhotra9714 2 ปีที่แล้ว +1

    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?

  • @hiteshsuthar1097
    @hiteshsuthar1097 3 ปีที่แล้ว +2

    Thanks again

  • @sandipbamaniya8559
    @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

  • @facemeifucanyt7997
    @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.

  • @coolgirlsharu
    @coolgirlsharu 7 หลายเดือนก่อน

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

  • @JaLegendsDance
    @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.

  • @dincer2f
    @dincer2f 3 ปีที่แล้ว

    love you man

  • @prasunalakshmi4035
    @prasunalakshmi4035 3 ปีที่แล้ว

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

  • @rahulshetty3849
    @rahulshetty3849 ปีที่แล้ว +1

    Thank you❤

  • @seethalramakrishnan2778
    @seethalramakrishnan2778 2 ปีที่แล้ว

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

  • @S4LTYT
    @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

  • @romimaximus
    @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
      @DipeshMalvia  3 ปีที่แล้ว +1

      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
      @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 ..

  • @mohamedyoussef8835
    @mohamedyoussef8835 2 ปีที่แล้ว +1

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

  • @karthikblswami
    @karthikblswami 3 ปีที่แล้ว +1

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

    • @DipeshMalvia
      @DipeshMalvia  3 ปีที่แล้ว +1

      React is hot skill at the moment.

  • @saurabrakshit405
    @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
      @DipeshMalvia  2 ปีที่แล้ว

      You can refer to my video React Firebase authentication I have used protected routes with react router dom version 6.
      th-cam.com/video/6kgitEWTxac/w-d-xo.html

  • @abhinavkulkarni3427
    @abhinavkulkarni3427 3 ปีที่แล้ว +1

    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
      @DipeshMalvia  3 ปีที่แล้ว +2

      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

  • @kapilgupta6058
    @kapilgupta6058 3 ปีที่แล้ว

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

    • @DipeshMalvia
      @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.

  • @muniralimuhammad16
    @muniralimuhammad16 2 ปีที่แล้ว +1

    Can I use this in react router v6?

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Yes, you can use it in React Router DOM v6 but the syntax is bit different - Checkout this video of help - th-cam.com/video/6kgitEWTxac/w-d-xo.html

  • @AmitRoy497
    @AmitRoy497 3 ปีที่แล้ว +2

    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
      @DipeshMalvia  3 ปีที่แล้ว

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

    • @AmitRoy497
      @AmitRoy497 3 ปีที่แล้ว

      @@DipeshMalvia thanks for the quick reply.

  • @Viral_Shorts_v
    @Viral_Shorts_v ปีที่แล้ว +1

    is Switch is still valid in Routes??

    • @DipeshMalvia
      @DipeshMalvia  ปีที่แล้ว

      No, you can refer to this video with implements the same in Router v6 - th-cam.com/video/6kgitEWTxac/w-d-xo.html

  • @gnanavelpandian7756
    @gnanavelpandian7756 3 ปีที่แล้ว +1

    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
      @DipeshMalvia  3 ปีที่แล้ว

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

    • @mattari97
      @mattari97 3 ปีที่แล้ว

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

  • @Notyoubiz
    @Notyoubiz ปีที่แล้ว

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

    • @DipeshMalvia
      @DipeshMalvia  ปีที่แล้ว +1

      Please check this for V6 - th-cam.com/video/6kgitEWTxac/w-d-xo.html

  • @likhilchopde5745
    @likhilchopde5745 3 ปีที่แล้ว +1

    One complete project for resume please

  • @alpeshpatel4504
    @alpeshpatel4504 2 ปีที่แล้ว

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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      You can check for Firebase authentication video - th-cam.com/video/6kgitEWTxac/w-d-xo.html

  • @rahulnikam1279
    @rahulnikam1279 2 ปีที่แล้ว

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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Please check my video for firebase authentication I have used protected routes along with react router dom V6.
      th-cam.com/video/6kgitEWTxac/w-d-xo.html

    • @rahulnikam1279
      @rahulnikam1279 2 ปีที่แล้ว +1

      @@DipeshMalvia thanks broo💯💯

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Welcome!

  • @akhileshmishra5559
    @akhileshmishra5559 3 ปีที่แล้ว

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

  • @NaveenKumar-yo7yf
    @NaveenKumar-yo7yf 3 ปีที่แล้ว

    Hi , make some videos on jwt token

  • @singh.aadarsh
    @singh.aadarsh 2 ปีที่แล้ว

    I don't understand props where its comes

  • @maxaquilino7264
    @maxaquilino7264 2 ปีที่แล้ว +1

    Good tutorial but does not work on React Router v6

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว +1

      You can check this video - th-cam.com/video/6kgitEWTxac/w-d-xo.html
      You will see how to implement protected routes with React Router v6.

  • @ravishankarpal6499
    @ravishankarpal6499 2 ปีที่แล้ว

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

  • @IT_FoodLover
    @IT_FoodLover 3 ปีที่แล้ว

    Sir pls make a video on react redux in login register

  • @amritakhetwani6070
    @amritakhetwani6070 2 ปีที่แล้ว +1

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

    • @DipeshMalvia
      @DipeshMalvia  2 ปีที่แล้ว

      Already available in my Firebase Authentication video - th-cam.com/video/6kgitEWTxac/w-d-xo.html

  • @ankitrajbhar158
    @ankitrajbhar158 ปีที่แล้ว

    Sunder Pichai

  • @sagarchavan973
    @sagarchavan973 3 ปีที่แล้ว +1

    Thanks