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 .
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 😀😄
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(); {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")} }
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 🎉😊
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?
I plan on making an update full styled components video, but at the time I have an older video if you want! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kKhQALrMtnU.html
@@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
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?
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?
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.
@@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
