Full React Tutorial #21 - The React Router 

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

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";

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

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

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

Nice! For v6 I used this code:

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

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

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

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

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

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.

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:

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

Hey Ninja, great tutorial and explanation🙏. I feel like you are the tutor I was searching for all this time on RU-vid. 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💯.

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

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

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

Loving this playlist, clearing up so many things

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

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

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 ❤🐱‍👤❤.

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.

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

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

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

Thank you ninja for this great effort.

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

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

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

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

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

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

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

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

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

U can use too

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

Thank you for this awesome react series.

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

Wow this one was so so clear !! Excellent job

Thanks man for clear explanation 🙌

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

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

thank you Net ninja You're the Best Teacher

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

amazing job. Simple and to the point

This is a great video. Thank you very much.

Great Video. Straight to the point.

Now I understand React thanks man :)

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

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

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

Brilliant Explanation

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?

Thank you! Helped a lot 👍

please also make another tutorial using react and firebase

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 ;)

Daymnnn that's the easiest explanation to this!

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

thanks you very much from algeria

Great video! Thank you!

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

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.

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

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 ?

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

Jesus it is so well explained.

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

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

Was waiting... thanks..

Nice tutorial!

well explained thank you sir

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?

Simply amazing

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

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

allright then gang

great video

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?

Thankyou very much sir

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

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

Thanks

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?

So f**king clear! Thanks!

just in case someone revisits here router V6

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 🙄🙂

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.

Thank you so much!

super, danke

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

i keep wondering why people dislike tutorials, Why ??

Refresh react redux too with hooks

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

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

sweet!

Vue3 and react look similar now

What is the best way to handle routes with auth?

If i finish all of these videos, will i be a net ninja?