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

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

2 жыл бұрын

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

@nikhildhakal3727

2 жыл бұрын

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

@vidblogger12

2 жыл бұрын

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

2 жыл бұрын

was just about to comment this

@oho6786

Жыл бұрын

ty

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

@hank91918

3 жыл бұрын

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

@ejay

2 жыл бұрын

Dev Ed's is pretty great

@samart3010

2 жыл бұрын

Codevolution reactjs playlist is also brilliant

@dlegand4951

2 жыл бұрын

scrimba react boot camp

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

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

Nice! For v6 I used this code:

@mohitgangwani6054

Жыл бұрын

it worked.thanks

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

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

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

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

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

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

2 жыл бұрын

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.

Loving this playlist, clearing up so many things

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

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

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

@NetNinja

7 ай бұрын

Thanks Gabriel! :)

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

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

Thank you ninja for this great effort.

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 so much for this video ! It really helped me get a clear understanding of React Router

Thank you for this awesome react series.

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

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

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

Wow this one was so so clear !! Excellent job

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

amazing job. Simple and to the point

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

@NetNinja

2 жыл бұрын

Thanks, hope it was helpful!

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?

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

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?

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

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

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

@NetNinja

2 жыл бұрын

Glad it was helpful! Thanks Mehrab :)

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

10 ай бұрын

instead of router use BrowserRouter

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

This is a great video. Thank you very much.

Great Video. Straight to the point.

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

5 ай бұрын

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

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

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.

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

2 жыл бұрын

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.

thank you Net ninja You're the Best Teacher

Thank you! Helped a lot 👍

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 ?

Now I understand React thanks man :)

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

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

Thanks man for clear explanation 🙌

@NetNinja

9 ай бұрын

No problem 👍

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

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

well explained thank you sir

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

Brilliant Explanation

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

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

Was waiting... thanks..

Great video! Thank you!

@NetNinja

5 ай бұрын

Thanks for watching! :)

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

Jesus it is so well explained.

Hi All, All of sudden when I started installing router package in my machine . My npm not working . Throwing me proxy behind error. Although I have deleted proxy details but still facing issue . Can someone help me to fix this issue ?

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?

I am having an error for 'BlogList' Component and i.e. React must be in the scope when using jsx...can anybody tell me why is the happening & how to resolve it..please

Thankyou very much sir

Nice tutorial!

Simply amazing

Daymnnn that's the easiest explanation to this!

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

What is the best way to handle routes with auth?

thanks you very much from algeria

@NetNinja

2 жыл бұрын

You are welcome! Hi to Algeria :)

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?

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

So f**king clear! Thanks!

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

how to can add routers in separate file and call that file in my application??

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

2 жыл бұрын

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

2 жыл бұрын

@@neo90sr Thanks

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

2 жыл бұрын

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

Thank you so much!

@NetNinja

Жыл бұрын

You're welcome Jam! :) hope it was helpful

please also make another tutorial using react and firebase

great video

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

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

@ArnoldsKtm

2 жыл бұрын

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

U can use too

@ridl27

3 жыл бұрын

preffered way for me.

@arturdeandrade7443

3 жыл бұрын

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

3 жыл бұрын

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

3 жыл бұрын

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

3 жыл бұрын

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

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

super, danke

Thanks

can you guys tell me whats the font he is using?

that's amazing

allright then gang

Thanks!

@NetNinja

Жыл бұрын

Thanks for your support Lei Wang! much appreciated :)

ty

5:07 I just realized. Why does the class App start with capital but the class contents doesn't?

@swanarmaan

3 жыл бұрын

That doesn't matter. This is just for styling with CSS and you can name it either way.

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

@nihatbastan5561

6 ай бұрын

Thank you man!!

thanks

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?

@-UPH-KRISHNAM

2 жыл бұрын

same

@user-dw1ve1qk2n

Жыл бұрын

did u find a solution for it?

Refresh react redux too with hooks

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