Full React Tutorial #21 - The React Router

In this React tutorial we'll talk about the React Router & see how to set it up so that we can have multiple 'pages' on our React websites.
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@danujajayasuriya9438]

it should be noted that starting from react-router-dom v6, has been replaced by .

[@davidbryanramboy5043]

Is that only new changes that tackle from the video?

[@chasec4897]

​@@davidbryanramboy5043 I had an error that a private route couldn't be used in short term, the solution was to make the links as the below: }>

[@davidbryanramboy5043]

@@chasec4897 singleton only

[@chasec4897]

@@davidbryanramboy5043 discovered that a few moments later

[@melissacouturier5644]

Thank you! was wondering!!

[@jeremy2217]

Good work as usual ! For V6 of react-router-dom use instead of and place your componant inside an element attribute import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

[@dobrealexandru1776]

Hi , i want to place html in Route , how can i do that?

[@nikhildhakal3727]

​@@dobrealexandru1776 Don't do that. Make that html into a component and

[@vidblogger12]

Gotta love front end development, where even a tutorial from 1 year ago is already outdated, and 3 new JS frameworks were released in the time it takes you to watch that tutorial! :D

[@alucard8678]

was just about to comment this

[@oho6786]

ty

[@neilcartwright6369]

If there's a better course on React I'd love to see it. Clear, concise, thoroughly brilliant.

[@hank91918]

it doesn't exist, this is as good as it gets!

[@ejay]

Dev Ed's is pretty great

[@samart3010]

Codevolution reactjs playlist is also brilliant

[@dlegand4951]

scrimba react boot camp

[@darexleon]

Nice! For v6 I used this code:

[@mohitgangwani6054]

it worked.thanks

[@i_am_human_being5570]

This person makes learning so easy. Specially because the tutorials are of short length.

[@effiemmanuel1927]

This is the best React Crach Course on KZbin ngl! For react-router-dom V6 you can use something like this:

[@martiananomaly]

For people who want to use react-router-dom v6.X, Make the import statement: import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'; and make the JSX:

[@OdessaSenpai]

Thank you for this hope he pins this

[@ayisiree]

@@OdessaSenpai Thanks for this. I had a blank screen for 20 minutes

[@Ancient244]

instead of router use BrowserRouter

[@gabrielenguidanos7690]

You're the godfather of tutorials. Concise, clear, perfect

[@NetNinja]

Thanks Gabriel! :)

[@sertacekici3342]

When I need to learn something about react you add a video about it. Thank you so much

[@sueholder703]

8:00 explains how a React application is delivered to a client compared to a non-react website. So nice to get that understanding.

[@druludwig]

Thank you for so often explaining the "why" behind what you're doing

[@azeezismaila846]

Thank you so much, I only just started react 2 days ago and you have given a wide grasp of it. You make it so fun

[@NetNinja]

Glad you're enjoying it! :)

[@heavydirtysoul1491]

When I need to learn any new technology about web development I go straight to this channel and check for a tutorial. Most of the times I learn it from here firstly. It is a great channel.

[@michaelcapone8913]

Wow ! The first 3 minutes when you explained how react works is just amazing.

[@PrashantAmoli]

Hey Ninja, great tutorial and explanation🙏. I feel like you are the tutor I was searching for all this time on KZbin. Your way of teaching is effective for me and the tutorials are just what I have planned to learn. Keep up the good work👍 and keep updating old tutorials like you you did here with functional programming in React. Super excited to learn a lot from you💯.

[@whatnowZA]

Sticking with version 5 was smart because version 6 removed Switch for Routes. Thanks for the turorial.

[@raphaelfreitas4565]

A big thank you from Brazil 🇧🇷 !!! Great explanation and demonstration...

[@NetNinja]

Thanks, hope it was helpful!

[@martinrombach2666]

You're the best introduction I've had on React, out of 4. Good job man, you really know how to teach :)

[@jayanspaliwal5907]

Update for react router 6: use instead of what's in the video @The Net Ninja kindly pin this comment so that people don't search through the entire comment section for answer. Thank you

[@randomthings1300]

Those who are using react-router-dom v6, please note some syntax change in the routing part- Switch has been removed and Routes have been introduced in place of that. refer below snippet please

[@baro1620]

what if i want to add into first route for example and ?

[@randomthings1300]

@@baro1620 Then you can add another route for Auth path say path="/user/auth" and element as e.g.

[@randomthings1300]

@@baro1620 However if you want to force user to Login page all the time when they are not logged in to application and once they login they should be able to create Then you have to have a mechanism to detect is user Authenticated and then allow to access to application accordingly This will ensure user is forced to login page if not logged in

[@labmember0045]

Thanks buddy appreciate it

[@dannyman2200]

Loving this playlist, clearing up so many things

[@andredesantana2188]

Shaun you are a LEGEND!!! THANK YOU SO MUCH FOR THE AMAZING TUTORIAL!!!!!!

[@Sohanjs]

For react-router-dom v6 onwards: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; Switch has been replaced by Routes and the Routes component requires that its children be either a or a . In version 6, the element prop is used instead of nesting components directly. The element prop takes the JSX element to render for the specified route.

[@_itshenry]

Do i need to save pages as .JSX or i could still use .JS

[@legendaryknight6462]

Shaun , u are so amazing . I love the way u explain everything . There is no body on earth who can do like what u do . I can not explain my feelings really . for about 2 years what ever I watched from your channel was the best of the best and how intelligently u plan to explain and make step by step guides in a very understandable way is so wonderful. I will be for ever member of this channel and will tell everybody u are my Hero. This channel worth 1 billion subscribers. Thank you Shaun ❤🐱‍👤❤.

[@tomaszswiatek4612]

You may need to restart react by write in terminal "npm start" to proper run react-router:). Thx Shaun again for next lessons:)

[@soulju9144]

We've been studying react for the past couple weeks with a test in a couple days. Definitely thought I was going to fail but you've given me hope! Lol. Thank you

[@yyyooohhhooo]

Man.. this is clearer than crystal. thank you!

[@musaabdalwahed5645]

Thank you ninja for this great effort.

[@user-ih5qg6xc7n]

Thanks Net Ninja for this content also thank to this community who posted how to achieve same in V6.. Thanks

[@nipunamunasinghe]

Thank you so much! I explored a lot websites to learn how to use routes. Finally I found this video. Thank you so much!

[@alanproduction910]

why doesn't work for me?

[@lollilolli4582]

Listening your course is not boring for you have such a pleasant voice , thank you xaxa :)

[@akhrorbekabdukhamitov8872]

for those who are using react-router-dom V6 your code should look like this

[@dobrealexandru1776]

What about placing html functions like or , how can i put that in Route?

[@danialranjbar9805]

Thank u for ur efforts for building all these great tutorials. Thank u

[@uhyahaa8371]

Oh boii.... the best tutorials on yt. thanks mate

[@trantrungnghia9642]

if you don’t double check to see if you have liked this guy’s videos or not, you are a criminal

[@Ivan-Shyriaiev]

Solution if you have problem such as [Home] is not an element or import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

[@yashprog1359]

Thank you! 😊

[@IndunilUdayalal]

This is a great video. Thank you very much.

[@engahd746]

U can use too

[@ridl27]

preffered way for me.

[@arturdeandrade7443]

It does simplify things, but if you plan to pass any props to the component , it seems to be easier when it's nested. I'm still learning though, so I might be wrong about this.

[@fjohanssondev]

The preferred way is to use the children method (as shown in the video). One thing to notice is that by using component={Whatever}, it will trigger React to create a new component for each render. Instead of updating the existing one. Also, I think the "to" prop is mostly used within links (Link, NavLink and such). While "path" is mostly considered to be used within the . I don't know if there's any difference using "to" within , does the "exact" prop work in that way?

[@ridl27]

@@fjohanssondev nah, its also "path", not a "to" attribute. He did a typo. And now I need to make research about component={Whatever}. Never thought that it could trigger React to create a new component for each render..

[@therichardchannel]

@@arturdeandrade7443 How do you pass props if it's written in this non-nested way?

[@mehrabmehmood7874]

Thank you for this Great Series. So much simplified and very well explained.

[@NetNinja]

Glad it was helpful! Thanks Mehrab :)

[@ayushman_sinhaa]

Thank you so much for this video ! It really helped me get a clear understanding of React Router

[@sameerpokharel3531]

thank you Net ninja You're the Best Teacher

[@rabitebibi]

Always at the top. Updated, and explained so ..... thx.

[@balakiswe]

This is some excellent skills to explain in that simple way.... cheers...

[@Cdswjp]

Thanks. It would be awesome if you created a video that shows how to use more than 1 bundle.js file in a project.

[@ameyapatil1139]

Wow this one was so so clear !! Excellent job

[@CodeRCreatives]

Thank you for this awesome react series.

[@basilm.b8499]

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

[@nihatbastan5561]

Thank you man!!

[@sanjaycosmos9547]

Thanks man for clear explanation 🙌

[@NetNinja]

No problem 👍

[@digitalpartner7598]

please mate you are the best , your method is the best , i learned a lot from you, would you please add a full MERN stack tutorials, it would be gentle , thanks

[@viniciusm.m.7822]

This video is beautiful! Obrigado, brother! Deus abençoe!

[@omarshoura6327]

amazing job. Simple and to the point

[@halitsalihoglu4536]

Now I understand React thanks man :)

[@ScrilloTube]

thanks you very much from algeria

[@NetNinja]

You are welcome! Hi to Algeria :)

[@MaybeKian]

great tutorial man, typescript + react would be really helpful too!

[@ramakrishnarudraraju6948]

Great Video. Straight to the point.

[@Arjun8BPCracker]

Daymnnn that's the easiest explanation to this!

[@candle-likeghost9523]

aliasing when destructuring When import: { Aaa as Garbage } When assign variable : { Aaa : Garbage } WHy?

[@ArnoldsKtm]

because object assignment operator is ":" import deconstructors are not objects per see and "as" is an alias operator long story short - deal with it

[@KevinMullarkey]

Brilliant tutorial Shaun, very clear voice and you explain everything clearly and easily.....but 'rowt' instead of 'root' for an Englishman!? I assume is for the American audience ;)

[@NetNinja]

Haha, good spot. I think my accent confuses them enough, gotta throw some native pronunciations in there occasionally :)

[@cruickshankatc]

Great video! Thank you!

[@NetNinja]

Thanks for watching! :)

[@md.ashrafulalam7533]

please also make another tutorial using react and firebase

[@user-sg4ek2dd3h]

Thank you! Helped a lot 👍

[@henterpeter4806]

Hi @theNetNinja. Does the way React handles routing mean that at the initial request the server returns all the possible content to the browser, and then React sorts out locally what to show to the user? In case of complex websites this can be quite a lot of data, couldn't it? What can be done, so that users don't have to wait for too long before the landing page gets rendered?

[@codymccarty9327]

I was wondering this same thing! It can't be the case, bc netflix uses react and they don't send every show they have everytime I open the app.

[@danalex2991]

Brilliant Explanation

[@tarekghosn3648]

i feel every message should be written differently but over all thank you

[@klirmio21]

I just love you bro Why do people pay for courses? If there's such brilliant free tutorials by godsent people like you? thank you! love frm Ukraine

[@neo90sr]

I have an error with switch. Attempted import error: 'Switch' is not exported from 'react-router-dom'. Does anyone know how to solve this? Looks like switch is not used anymore

[@neo90sr]

I found the solution on stackoverflow. In the new react version, "switch" is replaced by "routes" and the component you want to render is inserted inside the "route" as a prop. Also "exact" is not required anymore.

[@VTechBroLive]

@@neo90sr Thanks

[@andromilk2634]

Could you have called your home route instead of "/", for example, "/home"? Is this just a convention to begin your initial page only with a forward slash?

[@STUPIDYOUTUBE_HIDINGMSGS]

So this ROUTE component, how will that affect and clash with the NODE.js routing if you're doing a MERN application? Which one wins, react router or Node router?

[@afrikanking4022]

New Sub here... I love how you teach found you today

[@vladimirputindreadlockrast812]

As a beginner, React errors are frustratingly not well documented, IMO. My React app blew up after I ran the react-router-dom as described in this video. After a couple days of research, then giving up, then coming back to this video, I think I managed to fix it: 1) Uninstall Node.js on my Windows 11 machine. 2) Reboot 3) Fresh install Node.js 20.2.0 4) react create-app dojo-blog 5) enter dojo-blog folder 6) npm run start 7) npm install react-router-dom@5 8) npm json-server --watch data/db.json --port 8000 ...and my app is working without errors. As you can see, I did things a little out of order, swapping steps 7 & 8. I think the real fix here may have been the newest Node version, 20.n.

[@dannyman2200]

Obviously Node does a lot more, BUT in terms of handling requests does this router aspect of React negate Node and Express making them unnecessary for React apps ?

[@younesbav0up316]

well explained thank you sir

[@nischalmohan2409]

A question about BrowserRouter as Router. What is the difference between that and Say " { data: blogs,.. } ?

[@xdotli]

Jesus it is so well explained.

[@jamesmuriuki3785]

Thanks Ninja, coming back to React and this has made it so simple to level up!!!

[@jelouche]

Small update with react-router-dom, Switch is not longer the keyword to place routes inside your application. Instead use Routes.

[@ericmomoh7927]

Watch the video from the beginning he stated something. That is because the time of doing the tutorial router version 6 was in beta mode so he chooses to use version 5 router which was stable then. Always watch video thoroughly before making comments. Cheers mate.

[@jelouche]

@@ericmomoh7927 @Eric Momoh bruhh, i think you should read the comments carefully yourself first. I said update as in there is a new update. I myself was figuring out the new syntax for couple of minutes. So I commented so it might help someone as it is one of the most popular tutorial video on react. Cheers 🥂

[@nandopookey9195]

Thankyou very much sir

[@subee128]

Thanks

[@m4cdemos]

Many thanks for all your hard work - as a Brit, I can even (just about!) forgive you for pronouncing it 'rowt' instead of 'root'.... We already have to spell 'color' incorrectly, surely there's no need to speak 'US English' as well 🙄🙂

[@architdutt]

Simply amazing

[@maximk7816]

May I ask you some thing? If I show/hide components by routing does it make the same effect as mounting/unmounting components? I mean, in terms of rerendering?

[@bennyxfoo]

Thank you for the excellent tutorial. I am trying to convert my website to a react website. I use the traditional tags to route between pages and within pages. I am trying to use but it doesn't seem to work with "#id" eg. in the same page or on another page. It works ok with and . I am not sure what I am missing. Should I just stick with tags instead of . Would appreciate some help.

[@reinhardheydrich314]

thank u , this help me a lots love u :D

[@masaocodes]

Nice tutorial!

[@theobellash6440]

How do you lazy load component when a route is first activated ?

[@GiancarloCarccamo]

great video

[@eanonuevo]

I got 'Error: Failed to compile'. I need to import 'import React from 'react' in every JavaScript files that uses JSX. For it to compile successfully

[@user-nj1jj3xw2z]

super, danke

[@dobrealexandru1776]

How do i use html in Route ? i can t just put in there cus it says that [p] is not a component

[@donbigosso]

So f**king clear! Thanks!

[@stephenmuchara6696]

just in case someone revisits here router V6

[@drhastings]

i keep wondering why people dislike tutorials, Why ??

[@piekeheijmans7472]

allright then gang

[@andrewneilclarke]

Great tutorial!! Thanks so much. But, as a fellow Englishman, how are you pronouncing route/router!?!?!! 😂

[@Manozkirati]

Was waiting... thanks..

[@InvincibleMan99]

How do you re direct from a function based on sone condition ?

[@mishkathossain2984]

What can I do now?? the current running version of react dom is 18. I googled it?? how do I install it?? can anyone help me???

[@moathdw910]

What is the best way to handle routes with auth?

[@1qazxsw2010]

Switch is deprecated in version 6. You use Routes.

[@ericmomoh7927]

At the time of making the tutorial version 6 was in beta mode newly released, so he chooses to use version 5 router which was a stable version then. He stated it clearly at the router Installations.

[@marcinmaj3609]

Refresh react redux too with hooks