Full React Tutorial #22 - Exact Match Routes

🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@munchybonbon8675]

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]

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]

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

[@sabinoramirez2600]

@@bugsyplays3560 correct

[@sabinoramirez2600]

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

[@susmantobealivebruh4238]

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

[@stevegopop]

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

[@NetNinja]

Haha, thanks Steve!

[@sophiaonyoutube]

who needs netflix when you have netninja on youtube?

[@cyberohn]

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

[@adeleke5140]

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

[@adityaverma6120]

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.

[@beinyourguard]

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

[@johnmoore4248]

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

[@infobare2644]

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

[@carlijn1460]

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!

[@sadev0]

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

[@kashmirtechtv2948]

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

[@wontontech]

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

[@NetNinja]

Thanks, hope you enjoyed it!

[@gracelee5182]

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

[@ReachByteBurst]

congrats on a mil, thanks for the content!

[@NetNinja]

Appreciate it! :)

[@zakariabhaibi]

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

[@spookimiiki5891]

Very good video! Straight to the point!

[@amjadiqbalkhanniazi]

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

[@oscardbg9654]

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

[@indianlongboarder2844]

i finally learned the use of exact thank you

[@mohamedmousa2777]

Always the best instructor

[@HostDotPromo]

Agreed. His tutorials are so good.

[@rohitdummu7526]

Thank you so much you have cleared all my doubts🥳

[@NetNinja]

Happy to help Rohit! :)

[@Yasmine_habun]

Thanks a lot for everything literally. THANKS

[@anthonycalo4047]

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

[@sertacekici3342]

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

[@nandopookey9195]

Thankyou very much sir

[@johnconnor9787]

Please, consider someday to make a playlist on MERN stack

[@forresthu6204]

Thanks

[@pranavmishra9366]

Thanks buddy, I implemented and it worked.

[@NetNinja]

Glad it helped Pranav!

[@jess140]

great video!

[@theobellash6440]

What about lazy loading a component?

[@alexstaresson9517]

nice stuff!

[@joelmurphy7702]

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

[@ghofranedarragi5601]

thank you very much

[@rownokmahbub]

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

[@bharathr5936]

Thank you

[@kashmirtechtv2948]

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

[@mkmalikcom]

thank-you ♥️

[@renzjorgesjaredsanfernando3441]

THANK YOU SO MUCHHHHH

[@NetNinja]

[@mohamedhourri5607]

i love u man !!

[@hasanalkhder6260]

Great tutorial's

[@basilm.b8499]

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










);
}

[@scanpower8439]

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

[@clarencelindh1178]

gz to 800k

[@naolchala4354]

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

[@wpxpert98]

great! thank you

[@NetNinja]

No worries! thanks for watching :)

[@Mahmudulhasan-ts5hm]

thanks

[@learningit2572]

I love you!!!

[@tarekghosn3648]

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

[@ridl27]

ty

[@himadribhargava8455]

Awesome tutorial series

[@allenjohn4863]

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

[@all-in-all7862]

Can u create react-router beta version-6

[@natnaelghirma2617]

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]

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

[@matthewsteedman6867]

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

[@JanabSmile]

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

[@adelgafo7412]

good job sir

[@kashmirtechtv2948]

Which job?

[@user-ii6if3qw5o]

Update in react-router-dom V6
return (





);

[@ZTF666]

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

[@nick_jacob]

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

[@artihlec]

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

[@Ridhu]

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

[@developerbox3079]

@@Ridhu try and seeeeeee

[@vojka2973]

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

[@ckatke]

Ohh 😯 I thought it was all

[@Jacksons_are_jackson]

routerv6 done this by default :D

[@akkaradechsrithongchai7766]

🙏

[@NetNinja]

[@memory8888]

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

[@christianibana933]

React router v6 made routing easier and less code

[@jyotirmaysengupta2360]

First

[@icetmzz9074]

this is no longer needed in v6

[@muskankoshti2665]

plzzzzzzzzzzzzzzzzzzzzzz share the codeeeeeeeeeeeeeeeeeeeee

[@taicheeeee]

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

[@PamdoraPam]

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

[@subee128]

Thanks

[@shiyadh4471]

thanks

[@jacobzak7494]

Thanks