React Router Tutorial in Hindi | React Router Dom in Hindi in 2020 #56

Поделиться
HTML-код
  • Опубликовано: 20 янв 2025

Комментарии • 292

  • @ThapaTechnical
    @ThapaTechnical  4 года назад +52

    Guys, It's important last tak dekhna n links description me diya hua hai rho check kjiye🙏

    • @tasneemkhan1405
      @tasneemkhan1405 4 года назад

      Sir , React SSR pe video banao jismein ham Apne app Ko SSR kar sake which is very important for SEO purpose which Google crawl.
      Thanks in advance 🙏
      I know AAP zarur banaoge😅

    • @islaaaa_7
      @islaaaa_7 4 года назад

      Sir mera react app google chrome me nai khul raha h crash ho jaa raha h.. plzz help me sir plz 2 din ho gye h.. plz help kr dijiye sir

    • @havocdfallenwar1
      @havocdfallenwar1 4 года назад

      @@islaaaa_7 Can you share your code on codesandbox

    • @asadbukhari5744
      @asadbukhari5744 3 года назад +4

      code description mein share ni kia hua....

    • @muhammadjayce8198
      @muhammadjayce8198 3 года назад

      I know it's kinda randomly asking but do anybody know of a good place to watch newly released movies online?

  • @-Koushik-pl1xm
    @-Koushik-pl1xm 2 года назад +15

    For those facing error of switch try this code ;-
    import React from "react";
    import Contact from "./Contact";
    import About from "./About";
    import {Routes,Route} from "react-router-dom";
    function App (){
    const name =()=>{
    return I am name
    }
    return(






    );
    }
    export default App;
    instead of switch import Routes and instead of component use element as props
    it works 👍

  • @abhishekkalavadiya4798
    @abhishekkalavadiya4798 4 года назад +9

    Vinod thapa after opening vs code and apko dikhai de raha he vscode...
    Vinod: "pofect"
    Btw great videos, learning much more !!!.. thanks

  • @apurvpatil9947
    @apurvpatil9947 4 года назад +9

    Most important concepts in React-Router such as "switch , route , (vvip)exact" explained well and with ease to understand. The way of explanation "What happens when...:" is really something unprecedented.

  • @RAHULKUMAR-fn1fj
    @RAHULKUMAR-fn1fj 4 года назад +7

    I am waiting for this topic from so many days by you .and finally the wait is over.Thankyou so much for this. Amazing content.

  • @roadsidevlogs7855
    @roadsidevlogs7855 4 года назад +144

    And boom guys, 😂

  • @DR-jl6fm
    @DR-jl6fm 3 года назад +1

    Hello Vinod.
    First of all I would like to thank you for making alll these videos and uploading om RUclips for free.
    Hope you get millions and millions of subscribers because you truly deserve this. All the best in future

  • @EWorldHub
    @EWorldHub 4 года назад +2

    Awesome... Kadak Superb..... Bahot Hard Bahot Hard

  • @shera2667
    @shera2667 4 года назад +10

    following your react series from the 1 st video Thapa sir!
    its awesome 😍😍

  • @fahadmalik4869
    @fahadmalik4869 3 года назад +7

    Important Note:
    React Router Dom k latest version main switch remove hogya he uski jagah Routes likhna hoga
    Updated Code ye hai





    Switch ki jagah Routes or component ki jagah element or element k ander us trah component denge jaise upar code main diya hai

    • @mdtalha541
      @mdtalha541 3 года назад +1

      From last 3 days, I am thinking why my routing implementation is not working.......thanks for ur comment

  • @AltafAnsari-pg6js
    @AltafAnsari-pg6js 3 года назад +8

    if anyone following this tutorial in 2022 then after the react-router-dom v6 there is hell lot of changes for example your has become note that and both are different and the second change is has become . so the final code after replacing to will look like this....

  • @shauryasingh4329
    @shauryasingh4329 3 года назад +1

    Sir I love the way you teach,proud to have a Mentor like u

  • @rajat-s-kale1771
    @rajat-s-kale1771 Год назад +1

    Your teaching is awesome

  • @onesecondbeforedisaster8893
    @onesecondbeforedisaster8893 2 года назад +1

    Simple but most important, thank you sir

  • @raunakkumar6144
    @raunakkumar6144 2 года назад +1

    Thanks ! Loved your explanation.

  • @osamabinhassan.9369
    @osamabinhassan.9369 2 года назад

    Appreciate your efforts dude ! love from Pakistan ♥️🇵🇰

  • @saurabrakshit405
    @saurabrakshit405 3 года назад +33

    In Router V6 Switch is replaced by Routes & component attribute inside Route is changed to element.
    e.g ->

  • @kanikabagri247
    @kanikabagri247 4 года назад +10

    Beautifully Explained! Sir, Can you make a project on Resume Generator, where there will be a form asking everything to complete the resume, and once it is submitted, a full resume is generated!

    • @apurvpatil9947
      @apurvpatil9947 4 года назад +3

      Resume generator is nothing but "Forms" which is in Playlist. Instead use that's it.

  • @gurudattv9567
    @gurudattv9567 2 года назад

    Awesome video. A layman can understand. Thank you

  • @manpreetkailey7834
    @manpreetkailey7834 3 года назад +1

    Hlo sir your videos are really help full for clear our fonts of programming code

  • @iShubhamPanchal
    @iShubhamPanchal 3 года назад +2

    Quality stuff, appreciate it man👏👍

  • @sujanbista5117
    @sujanbista5117 3 года назад

    the best series on react js thank you so much binod sir u have idea how much u have helped us.

  • @gauravkhatri9840
    @gauravkhatri9840 2 года назад

    Adbhut prabhu....maza aagaya... thanks

  • @imnawasthi
    @imnawasthi 2 года назад

    Very Good Explanation,, keep it up brother

  • @aakashsharma5901
    @aakashsharma5901 3 года назад

    Awesome explanation sir...best video on react router

  • @divyanshusah2809
    @divyanshusah2809 3 года назад +1

    Bhai Thank u dil se...😭😭🙏

  • @goswamiboy-ravi4739
    @goswamiboy-ravi4739 Год назад

    Thankyou So much this video is Very Helpfully Bro

  • @ravinegi2189
    @ravinegi2189 7 месяцев назад +1

    great thank you thapa bhai

  • @meghnaperuri5096
    @meghnaperuri5096 3 года назад +2

    hi, at the end( 23:17 ) you didn't get "hi! I'm a name page" because you kept small-n instead of capital-n in the url

  • @sunildhiman6107
    @sunildhiman6107 2 года назад

    Everything explained to the point...

  • @ladlakhan1740
    @ladlakhan1740 2 года назад

    your video is really Very Useful

  • @ekkranti4896
    @ekkranti4896 4 года назад

    you are really doing awesome job sir, i heartly appreciate your job and such type of education surely beat the paid courses ....

  • @arunavaganguly4012
    @arunavaganguly4012 4 года назад

    Bohut khub bhai.. awesome video..

  • @saranshchauhan4584
    @saranshchauhan4584 2 года назад

    Thank You Sir for this wonderful lecture.

  • @yasirzubair20
    @yasirzubair20 3 года назад

    Thanks a lot for explaining in a simple way.

  • @shvmsh20
    @shvmsh20 Год назад

    Love from India❤❤❤❤

  • @nicetomeetugaming7024
    @nicetomeetugaming7024 2 года назад

    Very very helpful video sir, thanks a lot for helping!

  • @web_dev_with_ak
    @web_dev_with_ak Год назад +1

    Perfect 👌👌👌

  • @ranjanpaswan8811
    @ranjanpaswan8811 3 года назад

    I Love it you all video thank sir👌👌👌

  • @tasneemkhan1405
    @tasneemkhan1405 4 года назад

    Awesome sir😍 it's really very important video 🤗 Thanks a lot

    • @jarhyana
      @jarhyana 3 года назад

      can we write jsx as js file

  • @skgujar2725
    @skgujar2725 4 года назад

    Your the best teacher

  • @osamamalik3290
    @osamamalik3290 3 года назад

    Simple and easy explanation ❤️

  • @kritikasaxena6350
    @kritikasaxena6350 Год назад

    Nice and specific explanation

  • @darshanadey4696
    @darshanadey4696 4 года назад +2

    Another awesome video :)...please make videos on other react hooks as well...is it mandatory to learn REDUX or hooks can replace them..please clarify...Thankyou

  • @ArjunShresthaVlog
    @ArjunShresthaVlog 2 года назад +1

    If you have issue with switch write below code you will get all pagesl

  • @fitnessmodeldiet5350
    @fitnessmodeldiet5350 3 года назад +1

    Exact is really useful in life and in coding too 😂😂😂😂😂

  • @MohdNayab-g6p
    @MohdNayab-g6p Год назад

    Excellent Sir

  • @brandosol6214
    @brandosol6214 3 года назад

    why is page being loaded when going to error page, or error page to contact page even if we are using react ? at 21:28

  • @chirag5628
    @chirag5628 3 года назад

    Lovely video. Love you bro!

  • @3Dboxx
    @3Dboxx Год назад +1

    #your switch tag is not supported in v6 it replace to

  • @mdkutubail8848
    @mdkutubail8848 4 года назад

    very nice vaiya .I am from Bangladesh

  • @shruti42090
    @shruti42090 3 года назад +1

    🔥🔥🔥

  • @mosaddikalimaruf2722
    @mosaddikalimaruf2722 3 года назад +2

    Hello Sir, I'm working on a react project and I'm watching your videos to learn. I've got an issue about react-router. I've placed some URL on the footer & on the mega menu. the problem is, If I click the URL from the footer, though it takes me to that specific URL, I'm still on the footer. I mean Think Like that, I'm clicking on about page from footer, and I've redirected to about page, but I've to scroll up to the top to see all components. can you please help me on finding the solution to that problem? If you didn't understand, I can record a video and upload it to show you.

  • @kodeWithSaad714
    @kodeWithSaad714 3 года назад

    Hello sir when i save the route with component...home and all navbar active with background color red but component not show the home component data as well about and contact why? Please guide me

  • @pranavkelkar5373
    @pranavkelkar5373 Год назад +1

    If any one is using react-router-dom v6 then in that case please note that Switch is replaced by Routes

  • @amnacreatics7399
    @amnacreatics7399 2 года назад

    sir yai problems solve nahi horehi i think yai download nahi horeha hai
    ERROR in ./src/index.js 10:12-27
    export 'render' (imported as 'ReactDOM') was not found in 'react-dom/client' (possible exports: createRoot, hydrateRoot)

  • @niteshbisht31
    @niteshbisht31 2 года назад

    Sir starting m tumne bola tha page reload nahi hota but jab tum about or contact m ja rahe the toh reload ho raha h. Vinod sir please reply.

  • @musiclovers8488
    @musiclovers8488 4 года назад

    Awesome bro!!
    Why don’t you work on Laravel??
    And integrate with react and than teach us how to make android and iOS !!

  • @financewithsom485
    @financewithsom485 2 года назад

    and boom guys is legendary

  • @deepakpatil5793
    @deepakpatil5793 4 года назад

    is se aage jo router ke use hai unka bhi vidio aap ne bnaya hai kya..?

  • @laxmiagarwal439
    @laxmiagarwal439 3 года назад

    Bhaiya iss video mei components(about aur contact ) 2 different web oages bangye hai?

  • @adarshrathi8265
    @adarshrathi8265 4 года назад +1

    Bhai routing link use to ho Raha haa but google analytic pa without page reloading only 1 page hi show ho Raha ha multiple website pages par Bhi .every pages not show in analytics .what can I do help.

  • @vishal5545
    @vishal5545 3 года назад

    Hi,
    You are really amazing, you have great skills to explain things in very easy way.
    I request you please make a video on how we can send data to backend or provide me link in case you have already done.

  • @VishalSharma-nc7uy
    @VishalSharma-nc7uy Год назад +2

    If your error page is not showing then add asterik(*) in path as shown

  • @muhammadjunaid3684
    @muhammadjunaid3684 3 года назад +1

    It works like a *switch-case* statement in Javascript.

  • @saurabrakshit405
    @saurabrakshit405 3 года назад +2

    In Router V6 to show the error msg page go with this e.g->

  • @apnagamer61
    @apnagamer61 4 года назад +1

    Wow nice

  • @faraz__ahmed
    @faraz__ahmed 3 года назад

    Good work🔥

  • @ajaytiwari5243
    @ajaytiwari5243 3 года назад

    Can we use router to navigate pages by clicking on navbar links...

  • @meme_engineering4521
    @meme_engineering4521 3 года назад +5

    pro tip: If someone faces Issue with Switch, replace Switch with Routes

  • @fallofmanbrand
    @fallofmanbrand 4 года назад

    Loved It!

  • @shinchan4060
    @shinchan4060 3 года назад

    A nice website that you have created in your third year can you make a video on that how to create

  • @sachinjha6333
    @sachinjha6333 Год назад

    thank you thapa bhai

  • @ajay_kumar_india
    @ajay_kumar_india 3 года назад

    💥 boom guys 🤣🤣🤣

  • @rampatil1261
    @rampatil1261 2 года назад

    Does it has something lik RouterlinkActive to give specific class to activate link

  • @amitkumarbiswas
    @amitkumarbiswas 4 года назад +1

    React Routing not working when I host my project on apache server ( xampp server also ). Without Routing work perfectly. Please help me sir.

  • @MANISH-nb8wb
    @MANISH-nb8wb 4 года назад

    Awesome video. Sir please make video on full website using HTML CSS Php Java script wordpress and show online method

  • @rameshkhankriyal4462
    @rameshkhankriyal4462 4 года назад +1

    awesome video

  • @sanketwakchaure5990
    @sanketwakchaure5990 2 года назад

    Hello sir, added 1 package, and audited 48 packages in 5s
    4 packages are looking for funding
    run `npm fund` for details
    found 0 vulnerabilities....
    muze ye error show ho rha hai

  • @TharunkumarNadam
    @TharunkumarNadam 10 месяцев назад

    Sir, React-router-dom is not working when, importing in main.jsx file inside BrowserRouter .why?

  • @pranavdhawale19
    @pranavdhawale19 2 года назад +1

    Hey....Could you share the extensions which you use in VS Code. And BTW Great Video! Thanks!

  • @VINAYSINGH-wc8sq
    @VINAYSINGH-wc8sq Год назад

    Boom boom boom guyhesss🎉 🎉🎉🎉🎉

  • @khankabeer510
    @khankabeer510 3 года назад

    Pofect😅😅😜

  • @amitsolanki9363
    @amitsolanki9363 3 года назад

    Hy sir !! My subpage link and when i click on it address of this page show in briwser but it can't show content in tha page only home page show content

  • @pritammishra6933
    @pritammishra6933 4 года назад

    Nice explanation

  • @PraveshJain-lf5hc
    @PraveshJain-lf5hc Год назад

    For those who face problems in the error component in the route try this

  • @shivamtripathi5963
    @shivamtripathi5963 Год назад

    agar har page ke liye exact laga de to??

  • @nikhilkumarjamwal5322
    @nikhilkumarjamwal5322 Год назад

    Good now i know routing in ReactJS!😭

  • @sagarteli3262
    @sagarteli3262 2 года назад

    Thanks a lot bhai

  • @sahildonde8729
    @sahildonde8729 3 года назад +3

    For those who faces errors with Switch, replace it with Routes as follows..

  • @rahulbaghel1680
    @rahulbaghel1680 2 года назад

    bhai mst video

  • @rindukumari
    @rindukumari 3 года назад

    Hi sir you explained it very well but when we build it by running npm run build and put in a server it is not working when we type the url

  • @usmansajid00
    @usmansajid00 Год назад

    vinod bhai ye switch ka error dy raha hy
    bht try kiya nai ho raha set
    kindly tell me

  • @shreya2849
    @shreya2849 4 года назад

    Bhai Jab aap sublime text me new file create kar rahe hotehe to bahut saare options kaise aate hai aur app uses file Ko sublime me hi name deteho kaise please batado

  • @piyush_dolar
    @piyush_dolar 4 года назад

    Hello me ak video dhundh raha hu jisame, component load hone se pahlle "Loading..." text ata hai vo konsa video hai link dedo koi.

  • @nareshshama1982
    @nareshshama1982 Год назад

    switch is not working now, Routes has replaced now, can you please explain that also

  • @kartikamalviya4193
    @kartikamalviya4193 3 года назад

    sir now i am using Switch then it is not working and the error shows that 'Switch' is not exported from 'react-router-dom'.
    and the error i have seen on internet it showing use Routes sir please help me

  • @imranshaikh8868
    @imranshaikh8868 2 года назад +113

    For those who faces errors with Switch, replace it with Routes as follows..

    • @shubhamdeshpande4712
      @shubhamdeshpande4712 2 года назад +5

      Im still facing issue.. on browser it is showing blank screen

    • @KuldeepSingh-pl7rv
      @KuldeepSingh-pl7rv 2 года назад +5

      @@shubhamdeshpande4712 make changes in import also use this - import { Routes ,Route } from 'react-router-dom';

    • @sanaamreenkhan4034
      @sanaamreenkhan4034 2 года назад

      Thanks.

    • @anshgoyal3671
      @anshgoyal3671 2 года назад

      @@KuldeepSingh-pl7rv Still black screen

    • @KuldeepSingh-pl7rv
      @KuldeepSingh-pl7rv 2 года назад +1

      @@anshgoyal3671 bro try to check it react documentation maybe there will be some update so method can be change again

  • @AmeerHamza-bj6zu
    @AmeerHamza-bj6zu 3 года назад

    import { BrowserRouter as Router, Route } from "react-router-dom";
    Hi please tell me how i can solve this

  • @abhishekbhandari5306
    @abhishekbhandari5306 2 года назад +1

    1 bje react Js ka interview hai wish me luck