Thank you again. All your tutorials are concise, yet so well explained. As a beginner to React and node, trying to convert my knowledge from PHP has been challenging, but your tuts have helped everything click into place.
Thank you very much Pedro. It helps me a lot to understand the concept of routers very well.Your teaching skills are very attractive and i like the way you talk,once again thank you very much pedro,we want more tutorials
to add, a typical implementation of useLocation is to do a scroll to top everytime a link is click. it is well documented in the react router dom API .
Am commenting from Python point of view about why they don't just call it BroswerRouter as you said... I haven't tried it either but when you use "as" it's just the same as the English word "as" let's call youtube as tube ... This means we giving it an alias so whenever we call tube we are actually referring to youtube.. So my point is you can also use BrowserRouter directly if you choose not to give it an alias .... I haven't tried this but am saying that's the point from Python's point of view which I think is the same here with javascript. Incase am wrong commenters please point me to the right direction.
It would be great if you could make one tutorial containing user roles (admin, moderator, normal user) . Admin can access everything, moderator cannot access admin page and so on. It would be so grateful. (On one of your videos, you have just made one user with dashboard)
Thank you for watching! I have another video where I show how to determine user roles based on a nodejs api. It should be the exact same thing to add those 3 roles. I can definitely make a video on restricting routes on react router dom!
@@PedroTechnologies Actually, I do not handle the backend, and my task is to control the user roles in the front end. I am using react router dom for that. I will paste certain part of my code here. I hope you figure out what i am trying to do. Here is the switch part in app.js : const { userRole } = useUserInfo();
) } NOW; THE PROBLEM I AM GETTING IS : - when the user is not logged in, if i type localhost:3000/admin ==> AccessDenied component gets rendered -BUT, when i type, localhost:3000/randomtext ==> NOTHING GETS RENDERED (expected to render Home component) -when the user is logged in . same problem like above. (When moderator gets logged in, it cannot access admin, when admin is logged in, it can access everything. But, if random text is entered in the url, nothing gets rendered) So, that means, the last line is not executed. May be I am doing wrong inside Protected route, or I dont know what is the problem. I hope you got what I am trying to explain, and I hope you would give some idea to solve the problem :)
@@PedroTechnologies Hey, I think I figured out one way of doing it. As I am using conditional (ternary) operator inside Switch, I think the tag inside that operator is not working properly. So, I tried adding extra tag inside those condition, and now I am getting expected output. I dont know if thats correct way. But, I am getting the output that I was expecting. Hope, it will help others also who is in the similar situation :D Here is the modified code below:
Hi Pedro, I have seen some blogs that people use a separate route.js file to keep track of all the routes. Can you make a video on it, please? * I subscribed 🎉😊
this is for making comment count from 69 to 70, very well explained , but apart from this i have a ques that why u have used sublime text editor them in vsCode , again jokes apart well explaining thank u so much 😀😄
Next video teach everyone how to add advertising to there page in react.....its ridiculous how tough this is to do....amazon and google ads. Been trying for 3 days now.
@@PedroTechnologies let me know if you figured it out cause i tried myself and can't seem to get the ad to display. If you want my code let me know cause youtube won't let me link anything in comments. Do you have a twitter?
Awesome video brother, one thing to point out is that: when we specify /:name & /* both in our route, only one out of them will work. Is there any fix for that?
@@PedroTechnologies thx you for saving me time :) By the way react has a huge problem for the fact of single page aplication that is made with javascript. So crawler bots responsabile for seo has problems of understanding the website. Bad seo means your website cannot be easely found in search engine like google. I suggest you to cover this topic coz there is no many video about it that really helps saving the problem
So for your useParams example , you add /:name in the home path and when u use a name similar to the other link eg. name = localhost/blog (we have a route with /blog) so basically it is overlapping. what could be your remedy here?
Good one. when I try the same I'm getting the error as 'TypeError: Cannot read property 'push' of undefined in react'. Is this code on latest React version?
@@PedroTechnologies That's great. Thanks for the reply. I am a beginner in react. I love the simplicity of context. But I think you should also checkout Redux-toolkit. It removes almost all the nasty boilerplate of setting up redux. I haven't used mobx till now but will definitely check it out. Thanks
I'm trying to follow this but things are not working for me. I look at the React Router Dom docs and they seem to explain an entirely different, and much more confusing way of needing to do all this. I'm a bit confused... it seems like you need to setup your root, then create a BrowserRouter and then add providers and things. Is that necessary? The video is much simpler but doesn't work for me... I just get errors and blank pages despite following these instructions hmm
sorry, it seems that some of the instructions in the video are out of date for v6 of react router dom, and instead of 'component' as a prop, you use 'element', and pass in the component as jsx rather than a function. This was my issue, also Switch is no longer used, and instead you seem to need to use Routes instead.
![ตีสิบเดย์ [FULL] | อาจารย์โอเล่ ญาณสัมผัส ผ่าดวงคนดัง ประเทศไทยจะเป็นยังไงหลังจากนี้!](http://i.ytimg.com/vi/gszT2O76fL4/mqdefault.jpg)
React router updated and I made an updated version of this video: th-cam.com/video/UjHT_NKR_gU/w-d-xo.html
Thanks, Pedro, for a concise yet professional delivery of what can be a confusing concept. Good work!
Glad you enjoyed it!
I am brand new to react and this is a great really clear primer for understanding the router. Thanks Pedro!
Thank you again. All your tutorials are concise, yet so well explained. As a beginner to React and node, trying to convert my knowledge from PHP has been challenging, but your tuts have helped everything click into place.
Happy to hear :)
hy , i think its been a year for you...I am looking for node js course can u suggest me any playlist which explain clear similar like him?
Always appreciate your videos man. I learned a lot from you since I started going to React JS path. Now I'm started applying jobs. 🙏
Thank you so much! I am happy to see that i am helping you! Good luck on the job search, you will definitely get one soon!
Thank you very much Pedro. It helps me a lot to understand the concept of routers very well.Your teaching skills are very attractive and i like the way you talk,once again thank you very much pedro,we want more tutorials
brooooo, ngl but it's epic, really way better way of making understand than rest of the youtubers. Really appreciate it broo
Hahaha really appreciate it! Glad my videos are helping!
Amazing completely needed what i want
Thank you so much man
Amazing tutorial, u earned a new subscriber
Thanks for the sub!
to add, a typical implementation of useLocation is to do a scroll to top everytime a link is click. it is well documented in the react router dom API .
Great video, Pedro! This helped me a lot.
Glad you liked it!
Am commenting from Python point of view about why they don't just call it BroswerRouter as you said... I haven't tried it either but when you use "as" it's just the same as the English word "as" let's call youtube as tube ... This means we giving it an alias so whenever we call tube we are actually referring to youtube.. So my point is you can also use BrowserRouter directly if you choose not to give it an alias .... I haven't tried this but am saying that's the point from Python's point of view which I think is the same here with javascript.
Incase am wrong commenters please point me to the right direction.
Yeah your correct hahaha Its just cause its smaller and easier to right!
It would be great if you could make one tutorial containing user roles (admin, moderator, normal user) . Admin can access everything, moderator cannot access admin page and so on. It would be so grateful. (On one of your videos, you have just made one user with dashboard)
Thank you for watching! I have another video where I show how to determine user roles based on a nodejs api. It should be the exact same thing to add those 3 roles. I can definitely make a video on restricting routes on react router dom!
@@PedroTechnologies Actually, I do not handle the backend, and my task is to control the user roles in the front end. I am using react router dom for that. I will paste certain part of my code here. I hope you figure out what i am trying to do.
Here is the switch part in app.js :
const { userRole } = useUserInfo();
{userRole === "admin" &&
}
{userRole === "moderator" &&
}
{((userRole === undefined) || (userRole === ' ') ) &&
{console.log("undefined role entered")}
}
IN PROTECTED ROUTE :
export default function ProtectedRoute({ role, component: Component, ...rest }) {
//from userContext
const { userRole, isLoggedIn} = useUserInfo();
return (
{
//console.log(props);
if (isLoggedIn) {
return
} else {
return
}
}} />
)
}
NOW; THE PROBLEM I AM GETTING IS :
- when the user is not logged in, if i type localhost:3000/admin ==> AccessDenied component gets rendered
-BUT, when i type, localhost:3000/randomtext ==> NOTHING GETS RENDERED (expected to render Home component)
-when the user is logged in . same problem like above. (When moderator gets logged in, it cannot access admin, when admin is logged in, it can access everything. But, if random text is entered in the url, nothing gets rendered)
So, that means, the last line is not executed.
May be I am doing wrong inside Protected route, or I dont know what is the problem.
I hope you got what I am trying to explain, and I hope you would give some idea to solve the problem :)
@@PedroTechnologies Hey, I think I figured out one way of doing it.
As I am using conditional (ternary) operator inside Switch, I think the tag inside that operator is not working properly. So, I tried adding extra tag inside those condition, and now I am getting expected output.
I dont know if thats correct way. But, I am getting the output that I was expecting. Hope, it will help others also who is in the similar situation :D
Here is the modified code below:
{userRole === "admin" &&
}
{userRole === "moderator" &&
}
{((userRole === undefined) || (userRole === '') ) &&
{console.log("undefined role entered")}
}
Awesome video. Loved it. I had to subscribe.
Top knotch content bro you're a hero ❤️
Pedro great video, liked and subscribed! #fire 🔥
Loved it ...very nicely explained
Hi Pedro, I have seen some blogs that people use a separate route.js file to keep track of all the routes. Can you make a video on it, please?
* I subscribed 🎉😊
this is for making comment count from 69 to 70, very well explained , but apart from this i have a ques that why u have used sublime text editor them in vsCode , again jokes apart well explaining thank u so much 😀😄
Thank you! I just used the theme from sublime, but it is still vscode!
Next video teach everyone how to add advertising to there page in react.....its ridiculous how tough this is to do....amazon and google ads. Been trying for 3 days now.
Interesting! I actually have never implemented ads, but I can try it out! I thought google ads was straightforward, might have to check it myself.
@@PedroTechnologies let me know if you figured it out cause i tried myself and can't seem to get the ad to display. If you want my code let me know cause youtube won't let me link anything in comments. Do you have a twitter?
Awesome as always 👍😀
Thank you! Really appreciate the support!
Make video on styled components in react
I plan on making an update full styled components video, but at the time I have an older video if you want! th-cam.com/video/kKhQALrMtnU/w-d-xo.html
Thanx for replay , your every stuffs are useful to me and i am spreading your stuff links to my dev community.
Good Job Pedro
Thank you!
Great tutorial
Very simple and clear, thanks for this video, you are a star, Pedro, keep it up!
Great content! 👏
Thank you 🙌
Great video, thanks.
Amazing content, glad to be here before you 🚀
Hahaha Thank you for watching!
Awesome video brother, one thing to point out is that:
when we specify /:name & /* both in our route, only one out of them will work. Is there any fix for that?
Great video !:)
Thank you 💟
Another good video! Thanks pedro
No problem 👍
Thank you very much
i just found that react-router-dom v6 dont support Switch. is it wise to adopte the version 6, or stay in version 5?
Switch to v6 and remove the Switch tag!
Thanks!
Thank you for the support!
@@PedroTechnologies thx you for saving me time :)
By the way react has a huge problem for the fact of single page aplication that is made with javascript. So crawler bots responsabile for seo has problems of understanding the website. Bad seo means your website cannot be easely found in search engine like google.
I suggest you to cover this topic coz there is no many video about it that really helps saving the problem
instead of react router i prefer to use Next.js but its also a nice way
I really like next.js! I am actually thinking about making some sort of series on it!
So for your useParams example , you add /:name in the home path and when u use a name similar to the other link eg. name = localhost/blog (we have a route with /blog) so basically it is overlapping. what could be your remedy here?
What if you React app is on a subdomain? It will resolve to the root not the subdomain.
Thanks.
Good one. when I try the same I'm getting the error as 'TypeError: Cannot read property 'push' of undefined in react'. Is this code on latest React version?
love from india
Thank you!
Make videos on react projects
Very good very good
It would be happy please make on video redux crash course
Thank you! I actually don't code that much on redux so I wouldn't be able to make a series on it!
@@PedroTechnologies what do you use for state management?
@@md.siddiq7165 I use context API for most projects, if I need something extra sometimes I use MobX
@@PedroTechnologies That's great. Thanks for the reply. I am a beginner in react. I love the simplicity of context. But I think you should also checkout Redux-toolkit. It removes almost all the nasty boilerplate of setting up redux. I haven't used mobx till now but will definitely check it out. Thanks
is therer any code for this ? thanks
Good
Thank you!
NOICEEE
Thank you for watching!
Check your discord!!!
.
No one teaches how to use nested routing or creating dropdown menu's.... the documentation for react router is the worst ive ever seen.
I'm trying to follow this but things are not working for me. I look at the React Router Dom docs and they seem to explain an entirely different, and much more confusing way of needing to do all this.
I'm a bit confused... it seems like you need to setup your root, then create a BrowserRouter and then add providers and things. Is that necessary? The video is much simpler but doesn't work for me... I just get errors and blank pages despite following these instructions hmm
sorry, it seems that some of the instructions in the video are out of date for v6 of react router dom, and instead of 'component' as a prop, you use 'element', and pass in the component as jsx rather than a function. This was my issue, also Switch is no longer used, and instead you seem to need to use Routes instead.