Full React Tutorial #22 - Exact Match Routes

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

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

  • @munchybonbon8675
    @munchybonbon8675 2 года назад +266

    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 года назад +74

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

    • @NetNinja
      @NetNinja  2 года назад +10

      Haha, thanks Steve!

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

      who needs netflix when you have netninja on youtube?

    • @cyberohn
      @cyberohn 5 месяцев назад +1

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

  • @adeleke5140
    @adeleke5140 2 года назад +11

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

  • @sadev0
    @sadev0 3 года назад +13

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

  • @adityaverma6120
    @adityaverma6120 3 года назад +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.

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

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

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

    Always the best instructor

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

      Agreed. His tutorials are so good.

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

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

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

    Thank you so much you have cleared all my doubts🥳

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

      Happy to help Rohit! :)

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

    Thanks

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

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

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

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

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

    Very good video! Straight to the point!

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

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

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

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

    gz to 800k

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

    Thank you

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

    thank you very much

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

    great video!

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

    I love you!!!

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

    ty

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

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

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

    good job sir

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

    Ohh 😯 I thought it was all

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

    plzzzzzzzzzzzzzzzzzzzzzz share the codeeeeeeeeeeeeeeeeeeeee

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

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

    First

  • @beinyourguard
    @beinyourguard 3 года назад +9

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

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

    Thanks

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

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

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

    thanks

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

    Please, consider someday to make a playlist on MERN stack

  • @dailydosehq-official
    @dailydosehq-official Год назад +1

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

  • @Bee4Brendan
    @Bee4Brendan 3 месяца назад

    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

  • @oscardbg9654
    @oscardbg9654 3 года назад +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...

  • @DilshardAhamed-q2e
    @DilshardAhamed-q2e 9 месяцев назад

    Update in react-router-dom V6
    return (





    );

  • @memory8888
    @memory8888 8 месяцев назад

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

  • @basilm.b8499
    @basilm.b8499 9 месяцев назад

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










    );
    }

  • @catz497
    @catz497 3 месяца назад

    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

  • @johnmoore4248
    @johnmoore4248 3 года назад +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

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

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

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

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

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

    this is no longer needed in v6

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

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

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

      Thanks, hope you enjoyed it!

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

    congrats on a mil, thanks for the content!

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

      Appreciate it! :)

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

    Thanks

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

    Thanks a lot for everything literally. THANKS

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

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

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

    great! thank you

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

      No worries! thanks for watching :)

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

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

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

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

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

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

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

    React router v6 made routing easier and less code

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

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

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

    routerv6 done this by default :D

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

    What about lazy loading a component?

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

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

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

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

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

    i finally learned the use of exact thank you

  • @all-in-all7862
    @all-in-all7862 3 года назад

    Can u create react-router beta version-6

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

    thank-you ♥️

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

    Thankyou very much sir

  • @StephenBeale
    @StephenBeale 2 месяца назад

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

    • @NetNinja
      @NetNinja  2 месяца назад

      Thanks for your support as always Stephen :)

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

  • @renzjorgesjaredsanfernando3441
    @renzjorgesjaredsanfernando3441 4 месяца назад

    THANK YOU SO MUCHHHHH

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

    🙏

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

    Great tutorial's

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

    i love u man !!

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

    nice stuff!

  • @Mahmudulhasan-ts5hm
    @Mahmudulhasan-ts5hm 3 года назад

    thanks

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

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

    Thanks buddy, I implemented and it worked.

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

      Glad it helped Pranav!

  • @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 3 года назад +1

    Awesome tutorial series

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

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

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