I hardly jump in the comments section. Probably, this is my 4th or 5th comment on a TH-cam video for past 6 six years. First of all, I would like to thank you from the bottom of my heart for providing such great content free of cast over youtube. I'm a junior dev in the industry and writing plain HTML, CSS and JS for past 8 months. { For Laravel templating}. Right now, upgrading my toolset on React and Next. I'm learning alot from your TH-cam videos. I can't express enough that how thankful I'm to you at this stage of my carrier. People like you are hard to find. You are a gem in teaching and you must be proud on that. Keep guiding and enlighting us. We love you 💕
Great videos, Shaun! For some reason it didn't work for me using react-router-dom v5. I upgraded to v6 and got it working with this code (Note 'Switch' replaced by 'Routes' in V6 :
ya， react-router-dom v5 is conflict with react v18.0.0， google 「React 18: react-router@v5 is breaking in the Strict Mode」。 you can upgrade the react-router-dom, or downgrade the react back to 17.0.1.
React 18 is probably not comptabile with reac-router-dom v5. path was changing but content weren't rendering in my case. update react-router-dom to v6, plus changing above two lines worked for me.
Shaun i think you might have forgotten that you wrapped the fetch inside a setTimeout and the setTimeout was just to simulate a server request. If you remove the setTimeout you dont get that error @ 2:53 and the links are 10 times quicker
Hey Shaun, Thank you so much for the tutorial. I followed all your tutorial. In this particular video tutorial, at 2:52 , I didn't get the same warning message like you got on the console. I followed this tutorial from the start to end and my code are exactly the same as yours. Could you please explain to me why I didn't get the same warning on the console screen? Is this because I'm on newer version of react and they fixed this "memory leak" under the hood? My react version is 18.1.0
I can't make the warning message appear either. I'm using "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.3", "react-scripts": "^5.0.1",
Hello @The Net Ninja. I have a question please. When i clicked quickly the home then create links on the site, the my react app did not give me an error. could this be a new update to react or its something else?? I would really appreciate your feedback
Hi.. thanks for your awesome teaching~! Much much appreciate that. Just a question.. I followed your steps but in navbar links, they are not loading the respective components. If I refresh the page, I can load once. It fails in subsequent times. There is no error. Any idea how to fix it? I m using react-router-dom 5 too.
Same here, I think it has to do with the fact that he's using an older version of React (React 17), while we are using React 18. if you find a fix please let me know.
@@mehamdiamohamedamine4445 i upgraded react-router-dom to v6.. and swap to and switch to element (you can read on react router dom official blog about upgrading from v5).. now it s working.
@@mehamdiamohamedamine4445 ya, I use the React 17, then it work. I google that there's a conflict between React 18 and rea-router-dom 5: 「React 18: react-router@v5 is breaking in the Strict Mode」 Download the files "index.js" and “package.json” that Net Nija upload at github, ( chose the lesson 23 branch, so your packages will be the same environment,) and replace these two files with yours. Then key command 「npm install」, then your 「React」should downgrade to 17.0.1. My Link finally work~ this bug waste my whole day!
i think it;s a dumb question and surely i`m missing something from the past videos, but always getting the data from local, won't prevent getting new things from the server, changes on articles for example ?
Fix !! React not working with react-router-dom v 5 So upgrade it to v6 by stopping the react start and entering this, "npm i react-router-dom@6". Then make the following changes in Home.js,
Mr. Shaun, thanks for this amazing video. But I have a problem. When I click on the link I have to reload the page to show the elements. Any help on this, please?
What's the best way to manage links when you have lots of pages. for example 10 pages have download link and you want to make sure if you update a link it will update all of the links for the downloads page
Hi! I have an error about the when I changed the anchor tag into Link and also href into "to" then it throws an error Uncaught Error: Invariant failed: You should not use outside a How to fix this?
Hi @The Net Ninja, Love your videos on react and just wanted to know do I need to learn redux also for building modern applications. I just purchased your d3 course on udemy would also like to purchase a react and spring boot application eCommerce project on udemy
Shaun, do you plan to make a video on Route Guards /Private Routes using react-router ? Basically the navigation flow if a normal user tries to navigate to an authorised route that they're not allowed to view ?
I have a question. Let's say I make a complete website with lots of resources and stuff (maybe high quality pics), if I render the website with Router Links, does the site needs to be completely downloaded to local before it can be rendered? In this case it would be better to stick to regular routing? Thanks in advance to anyone who can help me! :)
Hey :) By this time i am using react-router-dom 6 and i get following warning in the console: "router.ts:11 No routes matched location "/"" Can someone explain me this ?
Thank you, Shaun. First of all, I would apologize first since my English might make it difficult for you to understand me. I'm optimistic, that anyone out here helps me. Let me get to it, I have two or more parent components such as Users, Programs, Books, etc. And routes like /programs, /programs/new, /programs/:id, /programs/:id/edit, which seem to work but when I bring in /users, /users/add etc. Sometimes it works and sometimes it doesn't. Thank you for your help in advance.
@@NetNinja this error doesnt seem to appear in mine and i have not cleaned up my custom hook lol. I didnt set my custom hook with a setTimer function. Is it because of that?
Can i make a question? Is it necessary to fetch the data again and again when we going to Home route ? I mean isnt it a waste because we have already load the data from the server! I am sorry if this is a dumb ques! I am stilk learning !
I hardly jump in the comments section. Probably, this is my 4th or 5th comment on a TH-cam video for past 6 six years.
First of all, I would like to thank you from the bottom of my heart for providing such great content free of cast over youtube. I'm a junior dev in the industry and writing plain HTML, CSS and JS for past 8 months. { For Laravel templating}. Right now, upgrading my toolset on React and Next.
I'm learning alot from your TH-cam videos. I can't express enough that how thankful I'm to you at this stage of my carrier. People like you are hard to find. You are a gem in teaching and you must be proud on that.
Keep guiding and enlighting us. We love you 💕
Comments like this mean so much to me, thanks for your support :)
summary of react router links (frontend routing, intercept the request and handle router in browser)
1. import { Link } from 'react-router-dom'
2. use
why doesn't work on me? i already install package react-router-dom
This man is the GOAT of TH-cam programming tutors
husband of sheep?
That moment when you want to hit Like button but you already have.. 🙈
thank you so much Shaun!! ⭐️
Great videos, Shaun! For some reason it didn't work for me using react-router-dom v5. I upgraded to v6 and got it working with this code (Note 'Switch' replaced by 'Routes' in V6 :
ya， react-router-dom v5 is conflict with react v18.0.0，
google 「React 18: react-router@v5 is breaking in the Strict Mode」。
you can upgrade the react-router-dom, or downgrade the react back to 17.0.1.
Thanks for this! Was also struggling with getting different page to render
Thanks! You literally saved me potential hours of research
Thanks a lot bro :)
React 18 is probably not comptabile with reac-router-dom v5. path was changing but content weren't rendering in my case.
update react-router-dom to v6, plus changing above two lines worked for me.
At least you can still style the tags since they are rendered on the page as tags, thanks for the tutorial!
Yes nice one
This is exactly what i needed for my pages!
This guy is not a ninja, he has become the master!!!!
I have been finding react routers a bit difficult to learn, u just make it seem sooooo easyy
Cool, I'm glad you're finding this helpful :)
Shaun i think you might have forgotten that you wrapped the fetch inside a setTimeout and the setTimeout was just to simulate a server request. If you remove the setTimeout you dont get that error @ 2:53 and the links are 10 times quicker
yeah, you are right!
But in reality, fetch does take time to process.
I can't reproduce the error, and I had my timeout set to 2000 ms :D
nah bro. In reality you dont know what you get. So be prepared
Hey Shaun, Thank you so much for the tutorial. I followed all your tutorial. In this particular video tutorial, at 2:52 , I didn't get the same warning message like you got on the console. I followed this tutorial from the start to end and my code are exactly the same as yours. Could you please explain to me why I didn't get the same warning on the console screen? Is this because I'm on newer version of react and they fixed this "memory leak" under the hood? My react version is 18.1.0
I can't make the warning message appear either.
I'm using
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.3",
"react-scripts": "^5.0.1",
most likely. i'm not encountering the warning message as well.
simple and to the point, just subscribed
In react router-dom v6 it will be: function App() {
return (
);
}
export default App;
Hello @The Net Ninja. I have a question please.
When i clicked quickly the home then create links on the site, the my react app did not give me an error.
could this be a new update to react or its something else??
I would really appreciate your feedback
i didnt get it either.
same question
Hi.. thanks for your awesome teaching~! Much much appreciate that. Just a question.. I followed your steps but in navbar links, they are not loading the respective components. If I refresh the page, I can load once. It fails in subsequent times. There is no error. Any idea how to fix it? I m using react-router-dom 5 too.
Same here, I think it has to do with the fact that he's using an older version of React (React 17), while we are using React 18.
if you find a fix please let me know.
@@mehamdiamohamedamine4445 i upgraded react-router-dom to v6.. and swap to and switch to element (you can read on react router dom official blog about upgrading from v5).. now it s working.
@@azuko23 thank you
@@azuko23 i was having the same issue, thank you
@@mehamdiamohamedamine4445 ya, I use the React 17, then it work.
I google that there's a conflict between React 18 and rea-router-dom 5:
「React 18: react-router@v5 is breaking in the Strict Mode」
Download the files "index.js" and “package.json” that Net Nija upload at github, ( chose the lesson 23 branch, so your packages will be the same environment,)
and replace these two files with yours.
Then key command 「npm install」,
then your 「React」should downgrade to 17.0.1.
My Link finally work~
this bug waste my whole day!
So easy to follow and understand.Thank you
This is such a good tutorial. Thank you.
i think it;s a dumb question and surely i`m missing something from the past videos, but always getting the data from local, won't prevent getting new things from the server, changes on articles for example ?
Fix !! React not working with react-router-dom v 5
So upgrade it to v6 by stopping the react start and entering this,
"npm i react-router-dom@6".
Then make the following changes in Home.js,
This should work, if not reply to this comment.
I actually did the same thing. Hi, five!
Thanks a lot, I was trying to look why is it not working for me 🤣
TOP as usual!!!
Mr. Shaun, thanks for this amazing video. But I have a problem. When I click on the link I have to reload the page to show the elements. Any help on this, please?
I had the same issue and what I did was to change it back to a href
great video man
Super Awesome content! Thanks a bunch!
This videos are awesome! Thank you!
Yes they are!!!
What's the best way to manage links when you have lots of pages. for example 10 pages have download link and you want to make sure if you update a link it will update all of the links for the downloads page
How many episodes will be there for this new react tutorials. BTW great stuff man
9 more videos to go... been working on this course for the last two days pausing and resuming as I worked along on my VS Code.
Hi! I have an error about the when I changed the anchor tag into Link and also href into "to" then it throws an error
Uncaught Error: Invariant failed: You should not use outside a
How to fix this?
Hi, the swicth while exporting it wasnt found in 'react-router-dom'
Niiiice! Thank you!
How do you deal with if you are putting your app on a subdomain. Getting React to know you are on a one?
Hi @The Net Ninja, Love your videos on react and just wanted to know do I need to learn redux also for building modern applications. I just purchased your d3 course on udemy would also like to purchase a react and spring boot application eCommerce project on udemy
You are number One. Ukraine watching!!!
Incredible content! This channel is the 1-stop shop to anybody struggling with React. =D Cheers m8
Glad you think so! :) that means so much, thanks
Shaun, do you plan to make a video on Route Guards /Private Routes using react-router ?
Basically the navigation flow if a normal user tries to navigate to an authorised route that they're not allowed to view ?
I'll be making a separate series in the future about auth/react which will include this type of logic.
Thanks a lot !
i have a problem
when i click on link i have to reload the page to show the elements
Facing same problem here. Have you been able to have it fixed?
@@davidarthur6221 updating "react-router-dom" to the latest version fixed it for me
I am not getting "cant perfrom react state update error"
Bro what font you used in this project
Its in the github repo
You are amazing, the way you teach is very nice.
I have a question. Let's say I make a complete website with lots of resources and stuff (maybe high quality pics), if I render the website with Router Links, does the site needs to be completely downloaded to local before it can be rendered? In this case it would be better to stick to regular routing? Thanks in advance to anyone who can help me! :)
I have the same question. Did you found the answer?
here cos of this comment.
does anyone have a blank page while doing this dunno what's the problem
I have the same Problem :/
thank you so much
Hey :) By this time i am using react-router-dom 6 and i get following warning in the console: "router.ts:11 No routes matched location "/""
Can someone explain me this ?
Thank you
ADAMSIIIN
Thank you, Shaun. First of all, I would apologize first since my English might make it difficult for you to understand me. I'm optimistic, that anyone out here helps me.
Let me get to it, I have two or more parent components such as Users,
Programs, Books, etc. And routes like /programs, /programs/new, /programs/:id, /programs/:id/edit, which seem to work but when I bring in /users, /users/add etc. Sometimes it works and sometimes it doesn't.
Thank you for your help in advance.
linking legends with new recruits
ty
Thanks
I'm not getting that error in the end for some reason
me too
Hello, what is the solution so that this error does not appear?
All explained in the next video of the series :)
@@NetNinja this error doesnt seem to appear in mine and i have not cleaned up my custom hook lol. I didnt set my custom hook with a setTimer function. Is it because of that?
@@VS257 Same, I also didn't create any setTimer function and it didn't show any errors
awesome
Can i make a question? Is it necessary to fetch the data again and again when we going to Home route ? I mean isnt it a waste because we have already load the data from the server! I am sorry if this is a dumb ques! I am stilk learning !
Most probably you don't get this error because you are on your local server and don't have the setTimeout like he had.
Mr Shaun ,When are you going to post angular tutorials
You can look at Ben Awad's videos if you'd like some inspiration about AngularJS.
Hello buddy excellent lesson as always! i have a question again! We write All routes of application in the App component? Ty in advance
Level
1st
thanks
Thanks