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

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

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

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

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

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

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

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

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

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

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

    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

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

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

  • @AltafAnsari-pg6js
    @AltafAnsari-pg6js 2 года назад +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....

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

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

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

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

    Simple but most important, thank you sir

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

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

    Thanks ! Loved your explanation.

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

    great thank you thapa bhai

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

    Awesome video. A layman can understand. Thank you

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

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

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

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

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

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

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

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

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

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

    Thankyou So much this video is Very Helpfully Bro

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

    Awesome explanation sir...best video on react router

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

    Bhai Thank u dil se...😭😭🙏

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

    Thanks a lot for explaining in a simple way.

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

    Very Good Explanation,, keep it up brother

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

    Quality stuff, appreciate it man👏👍

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

    Thank You Sir for this wonderful lecture.

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

    Everything explained to the point...

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

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

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

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

    Bohut khub bhai.. awesome video..

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

    your video is really Very Useful

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

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

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

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

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

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

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

    Nice and specific explanation

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

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

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

      can we write jsx as js file

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

    Love from India❤❤❤❤

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

    Simple and easy explanation ❤️

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

    Your the best teacher

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

    Perfect 👌👌👌

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

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

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

    I Love it you all video thank sir👌👌👌

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

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

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

    Lovely video. Love you bro!

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

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

    Excellent Sir

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

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

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

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

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

    very nice vaiya .I am from Bangladesh

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

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

    and boom guys is legendary

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

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

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

    Good now i know routing in ReactJS!😭

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

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

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

    thank you thapa bhai

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

    Wow nice

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

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

    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.

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

    1 bje react Js ka interview hai wish me luck

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

    bhai mst video

  • @anumoynandy5811
    @anumoynandy5811 Год назад +3

    For those who are facing issues :
    Copy Paste the code in your App.jsx file
    import React from "react";
    import { BrowserRouter, Routes, Route } from "react-router-dom";
    import Home from "./Home";
    import Contact from "./Contact";
    import About from "./About";
    const App = () => {
    return (









    );
    };
    export default App;

    • @ayushsingh-wk9ft
      @ayushsingh-wk9ft Год назад

      bro but why it is showing error

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

      @@ayushsingh-wk9ft actually these videos are 2.5 years old, and most probably thapa used react router dom version 5 at that time. And after the introduction of React Router DOM v6, there are a hell lot of features which are deprecated and also there are some new features replacing them. If you want to execute the exact code mentioned in the video, then install react router dom v5 surely.

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

    Good work🔥

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

    Loved It!

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

    Nice explanation

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

    Thanks a lot bhai

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

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

    Boom boom boom guyhesss🎉 🎉🎉🎉🎉

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

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

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

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

    Helpful content;

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

    in react-router-dom v6, switch has been replaced by router so write:
    import {Routes,Route} from 'react-router-dom'

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

    🔥🔥🔥

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

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

  • @amirshaikh.147
    @amirshaikh.147 Год назад +1

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

  • @Dineshkumar-lz4uq
    @Dineshkumar-lz4uq 2 года назад

    Bom 😅
    problem- This methode is create problem from app.jsx/switch.
    solution - 1.close your npm - . clrl+c y and enter
    2.npm i react-router-dom@5.3.0 and enter
    3.stary npm

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

    Please slow down while explaining any concept.

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

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

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

    Superb...

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

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

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

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

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

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

    guys there is some changes in react
    instead of switch use Routes
    and instead of attribute component use element={}

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

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

  • @YashSharma-gt1eo
    @YashSharma-gt1eo 2 года назад

    Best...

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

    Love you bro

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

    Nested routing bhi bta dan

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

    Pofect😅😅😜

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

    import { Routes ,Route } from 'react-router-dom';

  • @AnandYadav-dc9pf
    @AnandYadav-dc9pf 4 года назад

    Sir ek problem h apki videos mein, 5min k topic ko repeat kr kr k 25min ka kr dete ho. Short banao na sir

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

    Alright pofect

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

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

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

  • @rahul-java-dev
    @rahul-java-dev 4 года назад

    Thank you.

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

    Bro please Dynamic Routing k uppr bhi video bnao