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";
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
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.
Hey Ninja, great tutorial and explanation🙏. I feel like you are the tutor I was searching for all this time on RUclips. 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💯.
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:
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 , 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 ❤🐱👤❤.
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 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
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
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.
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 ;)
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
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.
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?
@@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..
If you use react-router-dom v6, this is a correct code import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Navbar from './Navbar'; import Home from './Home'; function App() { return (
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.
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?
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?
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?
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 ?
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.
@@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 🥂
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 🙄🙂
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
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.
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.
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?
Try this if you faced an error import Navbar from './Navbar'; import Home from './Home'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; function App() { return (
I got 6 high severity vulnerabilities after installing T_T I tried doing it with version 5 first and then installed version 6. Still got the same vulnerabilities. Even by using npm audit fix and npm audit fix --force, it's the same. Anyone got a fix or shall i just continue with the tutorial?
it should be noted that starting from react-router-dom v6, has been replaced by .
Is that only new changes that tackle from the video?
@@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:
}>
@@chasec4897 singleton only
@@davidbryanramboy5043 discovered that a few moments later
Thank you! was wondering!!
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";
Hi , i want to place html in Route , how can i do that?
@@dobrealexandru1776 Don't do that. Make that html into a component and
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
was just about to comment this
ty
This person makes learning so easy. Specially because the tutorials are of short length.
This is the best React Crach Course on RUclips ngl!
For react-router-dom V6 you can use something like this:
If there's a better course on React I'd love to see it. Clear, concise, thoroughly brilliant.
it doesn't exist, this is as good as it gets!
Dev Ed's is pretty great
Codevolution reactjs playlist is also brilliant
scrimba react boot camp
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
Glad you're enjoying it! :)
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.
Nice! For v6 I used this code:
it worked.thanks
You're the godfather of tutorials. Concise, clear, perfect
Thanks Gabriel! :)
8:00
explains how a React application is delivered to a client compared to a non-react website. So nice to get that understanding.
Hey Ninja, great tutorial and explanation🙏. I feel like you are the tutor I was searching for all this time on RUclips. 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💯.
Wow ! The first 3 minutes when you explained how react works is just amazing.
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:
Thank you for this hope he pins this
@@OdessaSenpai Thanks for this. I had a blank screen for 20 minutes
instead of router use BrowserRouter
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...
Thanks, hope it was helpful!
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
Thanks Net Ninja for this content also thank to this community who posted how to achieve same in V6.. Thanks
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 ❤🐱👤❤.
You may need to restart react by write in terminal "npm start" to proper run react-router:). Thx Shaun again for next lessons:)
Loving this playlist, clearing up so many things
Shaun you are a LEGEND!!! THANK YOU SO MUCH FOR THE AMAZING TUTORIAL!!!!!!
Solution if you have problem such as [Home] is not an element or
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
Thank you! 😊
Thank you so much! I explored a lot websites to learn how to use routes. Finally I found this video. Thank you so much!
why doesn't work for me?
Thank you ninja for this great effort.
Man.. this is clearer than crystal. thank you!
Listening your course is not boring for you have such a pleasant voice , thank you xaxa :)
Oh boii.... the best tutorials on yt. thanks mate
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
what if i want to add into first route for example and ?
@@baro1620 Then you can add another route for Auth path say path="/user/auth" and element as
e.g.
@@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
Thanks buddy appreciate it
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
Thank u for ur efforts for building all these great tutorials. Thank u
Thank you so much for this video ! It really helped me get a clear understanding of React Router
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.
Do i need to save pages as .JSX or i could still use .JS
Thanks man for clear explanation 🙌
No problem 👍
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 ;)
Haha, good spot. I think my accent confuses them enough, gotta throw some native pronunciations in there occasionally :)
Thank you for this awesome react series.
thank you Net ninja You're the Best Teacher
Wow this one was so so clear !! Excellent job
This is a great video. Thank you very much.
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
This is some excellent skills to explain in that simple way.... cheers...
Thanks. It would be awesome if you created a video that shows how to use more than 1 bundle.js file in a project.
Thank you for this Great Series. So much simplified and very well explained.
Glad it was helpful! Thanks Mehrab :)
Now I understand React thanks man :)
Always at the top.
Updated, and explained so .....
thx.
Great Video. Straight to the point.
This video is beautiful!
Obrigado, brother!
Deus abençoe!
great tutorial man, typescript + react would be really helpful too!
Brilliant Explanation
thanks you very much from algeria
You are welcome! Hi to Algeria :)
for those who are using react-router-dom V6 your code should look like this
What about placing html functions like or , how can i put that in Route?
U can use too
preffered way for me.
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.
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?
@@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..
@@arturdeandrade7443 How do you pass props if it's written in this non-nested way?
amazing job. Simple and to the point
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
if you don’t double check to see if you have liked this guy’s videos or not, you are a criminal
please also make another tutorial using react and firebase
If you use react-router-dom v6, this is a correct code
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from './Navbar';
import Home from './Home';
function App() {
return (
);
}
export default App;
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.
Thank you! Helped a lot 👍
Daymnnn that's the easiest explanation to this!
Great video! Thank you!
Thanks for watching! :)
well explained thank you sir
Thanks Ninja, coming back to React and this has made it so simple to level up!!!
Thankyou very much sir
In recent versions of react-router-dom, the Switch component has been replaced by Routes
function App() {
return (
);
}
Thank you man!!
aliasing when destructuring
When import: { Aaa as Garbage }
When assign variable : { Aaa : Garbage }
WHy?
because object assignment operator is ":"
import deconstructors are not objects per see and "as" is an alias operator
long story short - deal with it
New Sub here... I love how you teach found you today
i feel every message should be written differently but over all thank you
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?
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.
Nice tutorial!
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?
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?
thank u , this help me a lots love u :D
Jesus it is so well explained.
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 ?
Simply amazing
Small update with react-router-dom, Switch is not longer the keyword to place routes inside your application. Instead use Routes.
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.
@@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 🥂
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 🙄🙂
A question about BrowserRouter as Router. What is the difference between that and Say " { data: blogs,.. } ?
So f**king clear! Thanks!
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
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.
@@neo90sr Thanks
Was waiting... thanks..
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.
i keep wondering why people dislike tutorials, Why ??
great video
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?
Great tutorial!! Thanks so much. But, as a fellow Englishman, how are you pronouncing route/router!?!?!! 😂
allright then gang
Thanks!
Thanks for your support Lei Wang! much appreciated :)
If i finish all of these videos, will i be a net ninja?
Yes. Officially 😃
@@NetNinja Hell yeah, I'm going to need to buy a shirt if it's official.
Thank you for your hard work
super, danke
How do i use html in Route ? i can t just put in there cus it says that [p] is not a component
Try this if you faced an error
import Navbar from './Navbar';
import Home from './Home';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
);
}
export default App;
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
How do you lazy load component when a route is first activated ?
What is the best way to handle routes with auth?
Can we get video about version 6?
I got 6 high severity vulnerabilities after installing T_T
I tried doing it with version 5 first and then installed version 6. Still got the same vulnerabilities. Even by using npm audit fix and npm audit fix --force, it's the same. Anyone got a fix or shall i just continue with the tutorial?
same
did u find a solution for it?