Full React Tutorial #22 - Exact Match Routes

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ม.ค. 2025

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

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

    Just a heads up for other viewers, with React Router v6 (latest version), the code would look like this:





    Basically has been replaced with , and accepts the element attribute, to which you assign the component you would like to load.

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

      Does this also mean the exact prop isn't needed?
      I'm using 6 and my Create page seemed to work fine without it when done like this.

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

      @@bugsyplays3560 ARe u sure u are using v6 in your project, as Switch is throwing an error in v6

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

      @@bugsyplays3560 correct

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

      @@unknownman1 bugsy is referring to the 'exact' part of . In v6 it works with just path

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

      @@unknownman1 remove "switch" and use "routes "instead of switch then use the code shown as above that should solve that problem

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

    Bro, this guy has cliff hangers for react tutorials.....I cant stop watching

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

      Haha, thanks Steve!

    • @sophiaonyoutube
      @sophiaonyoutube 9 หลายเดือนก่อน

      who needs netflix when you have netninja on youtube?

    • @cyberohn
      @cyberohn 9 หลายเดือนก่อน +2

      Honestly broo😂... I came to learn just React router and I find myself watching the whole tutorial 😂

  • @adityaverma6120
    @adityaverma6120 4 ปีที่แล้ว +19

    Hi Shaun, I think the explanation for partial matching is a bit incorrect at 2:40. /create URL won't match /c route, partial match means partial after every forward slash in the URL. For example, the URL /create/user/123 will match the routes /create or /create/user/, but it won't match any partial word. And this makes more sense because using partial matches, we can nest the routes.

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

    love this course and also the way you delivered the word "preview" with a flourish at 3:30😊😊 thanks again

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

      Thanks for your support as always Stephen :)

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

    congrats on a mil, thanks for the content!

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

      Appreciate it! :)

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

    This is excellent, short and to the point! Thank you

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

      Thanks, hope you enjoyed it!

  • @beinyourguard
    @beinyourguard 4 ปีที่แล้ว +9

    Shaun, will you include styled components in this tutorial? I'd love to learn about it.

  • @adeleke5140
    @adeleke5140 3 ปีที่แล้ว +11

    Hi Shaun, it does seem like in Router6, a lot has changed and the path does work automatically

    • @meditationgalaxy9839
      @meditationgalaxy9839 5 หลายเดือนก่อน

      yes it seems to have improved , dont need exact part

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

    You are on point, most instructors do not explain what that "exact

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

    Hi Shawn, I am really excited to see the final product so I am learning a head by studying your github codes up to lesson 32. And again, thank you for creating these educative and informative series. Cheers

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

    Amazing!! You clear the things in a very short time

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

    Thank you so much you have cleared all my doubts🥳

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

      Happy to help Rohit! :)

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

    thank you so much for this video! I am new to react and i had some trouble with routes, but you explained it so well in this video and it helped a lot! Keep up the good work!

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

    You the man! Thanks for the videos. Every other react router video is unclear or some guy from India

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

    for the algorithm we need to send this to the world.

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

    Always the best instructor

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

      Agreed. His tutorials are so good.

  • @sadev0
    @sadev0 4 ปีที่แล้ว +13

    Hey Shawn thanks for this :)...
    Is there any chance of Coming "Testing React - Typescript with JEST || ENZYME " Course?

  • @dailydosehq-official
    @dailydosehq-official ปีที่แล้ว +1

    If you are working with V6 you also do not need to use the exact in the Route declaration.

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

    I need to sleep and chill WHY AM I SO ADDICTED TO THIS xD

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

    Very good video! Straight to the point!

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

    Please, consider someday to make a playlist on MERN stack

  • @indianlongboarder2844
    @indianlongboarder2844 4 ปีที่แล้ว

    i finally learned the use of exact thank you

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

    Thanks a lot for everything literally. THANKS

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

    great tutorials, thanks, it will be good if you include context api in this tutorial with useReducer hook

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

    In addition to @munchyBonbon 's comment, remember to define an 'element' attribute if you're using v6 of react-router-dom:

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

    Thanks buddy, I implemented and it worked.

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

      Glad it helped Pranav!

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

    gz to 800k

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

    How does this work with unit testing? I'm having issues when trying to test that the Stats button on my app takes you to the stats page, it's expecting "/stats" but receiving "/". I suspect it's a similar issue to the exact path issue you mentioned in these videos but I can't for the life of me figure out how to make the test check the whole string specifically

  • @basilm.b8499
    @basilm.b8499 ปีที่แล้ว

    In recent versions of react-router-dom, the Switch component has been replaced by Routes
    function App() {
    return (










    );
    }

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

    When you misspelled exact and it wasn't underlined and you saved it, I was about to freak out that it worked 😂 then it didn't

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

    It looks for the first address
    It finds / so it shows homepage that's why we use exact

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

    Ninjas, how can i deploy locally the app if i'm using webpack, i've tried the vscode live server and express server for the index.html but didn't work...

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

    What about lazy loading a component?

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

    Thankyou very much sir

  • @renzjorgesjaredsanfernando3441
    @renzjorgesjaredsanfernando3441 8 หลายเดือนก่อน

    THANK YOU SO MUCHHHHH

    • @NetNinja
      @NetNinja  8 หลายเดือนก่อน

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

    great video!

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

    if the Switch tag renders the route component exclusively, why do we need the exact property in the first place? I'm confused.

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

    nice stuff!

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

    Hey Guys , "Switch" has been Deprecated is there any other alternative?

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

      Use 'Routes' instead of Switch.... just replace every 'Switch' with 'Routes'

  • @naolchala4354
    @naolchala4354 4 ปีที่แล้ว

    Good tutorial, can you add à video with router animation?

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

    Note for viewers, React Router v6 uses exact matching by default.

  • @sertacekici3342
    @sertacekici3342 4 ปีที่แล้ว

    This is amazing. Good job as always. Thank you Shaun

  • @mkmalikcom
    @mkmalikcom 4 ปีที่แล้ว

    thank-you ♥️

  • @mohamedhourri5607
    @mohamedhourri5607 4 ปีที่แล้ว

    i love u man !!

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

    Thank you

  • @allenjohn4863
    @allenjohn4863 4 ปีที่แล้ว

    It would be great if we get a video on how to integrate Gpay into our website.

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

    thank you very much

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

    actually /c will not match /create , but /np will match /np/something (things between slashes must be exactly the same )

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

      "Things between slashes" also refers to things after the last slash right?

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

      @@Ridhu try and seeeeeee

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

    Awesome tutorial series

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

    Great tutorial's

  • @DilshardAhamed-q2e
    @DilshardAhamed-q2e ปีที่แล้ว

    Update in react-router-dom V6
    return (





    );

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

    great! thank you

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

      No worries! thanks for watching :)

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

    I love you!!!

  • @ridl27
    @ridl27 4 ปีที่แล้ว

    ty

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

    'useEffect' is defined but never used how could i Solve this error? anyone please help me?

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

    compared to nuxt , nuxt is a blessing in this area ! haha

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

    Is there a better way to route. It seems very tedious to create routing this way. If you have 20 routes, it will be like 60 lines.

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

      did you find a way?
      because I have a same problem as well .d

  • @all-in-all7862
    @all-in-all7862 4 ปีที่แล้ว

    Can u create react-router beta version-6

  • @Mahmudulhasan-ts5hm
    @Mahmudulhasan-ts5hm 3 ปีที่แล้ว

    thanks

  • @adelgafo7412
    @adelgafo7412 4 ปีที่แล้ว

    good job sir

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

    Why wouldn't they just build in the 'exact' property into the 'path' property? That seems unnecessary.

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

    Ninja can you do react tutorial on udemy bro ?! PLZ

  • @ckatke
    @ckatke 4 ปีที่แล้ว

    Ohh 😯 I thought it was all

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

    routerv6 done this by default :D

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

    🙏

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

    Let's save that now and... pRRreview.

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

    【2023/6/29】
    #NO NEED TO WATCH THIS CLIP.#
    I think the content this clip talked about was kind of bug of react routers.
    However, they've fixed this problem.
    Don't need to watch this video now.

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

    React router v6 made routing easier and less code

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

    this is no longer needed in v6

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

    First

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

    plzzzzzzzzzzzzzzzzzzzzzz share the codeeeeeeeeeeeeeeeeeeeee

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

    Is not easy to understand the routes, I had to figure out that you already made the hrefs in the navbar point to the routes you were using here

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

    thanks

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

    Thanks

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

    Thanks

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

    Thanks