Role Based Routing in React JS | Role Based Navigation Links | React Router Dom tutorial
HTML-код
- Опубликовано: 10 дек 2022
- #reactjs #reactrouter #reactnavigation
In this react-router-dom tutorial I have explained how to implement role based routing in react JS, how to define role based navigation links to navigate on user role based react components
This video focuses on
- How to implement role based routing in react JS
- How to define role based navigation links
- How to navigate to user role based react components using react-router-dom
- How to create protected or private routes in reactJS
- How to create public or guest routes in reactJS
- How to define Public Router Elements
- How to define User Role Based Router Elements
- How to handle role based routing and role based component in React JS
- How to create user role based navigation bar links in application header
- How to redirect user to home page from protected routes in react
- How to show custom messages on protected routes access
- How to create generic page not found route using react-router-dom in react
For detailed tutorial on react-router-dom v6 please watch following video
• How to implement Route...
and to create app side menu with routing to different pages following video might help you • App Side Menu with Rou...
In case of any question please let me know in comments below.
Happy Coding!
Long awaited tutorial.
Awesome tutorial Amir, super easy. Thanks a bunch!
Glad you liked it!
Simple and clear one thanks!!And I appreciate you replying to all the comments and Questions.This piece works just like that When I took your idea of showing and hiding Links based on ROLES.
Awesome, thank you!
This helped me with my final year project. Thank you very much!
Glad to hear it was so helpful. Awesome.
Thanks to show new concept...its really helpful to understand role based routing. Great work sir
Glad you liked it. Thank you!
Enterprise Grade content here !!! Many thanks
This is really great to hear it was that much helpful to you!
Thank you @Arnaud POUTIEU
Great work sir, lots of thanks ❤✌❤
So nice of you, Keep watching ❤
You gave perfectly what I want.
Glad it was helpful!
a very nice way to explain things & controls over components
So nicely of you!
thanl you so much. very helpful
So nice of you @Robo Babes
Worth content 😍 if possible please put a video for bulk data upload in material ui data grid.
Thanks @Naveen s,
I mostly work with ant design ui and have uploaded multiple videos regarding that on my channel. I can create videos on material UI once I got good hands on there in future.
Thanks for the suggestion.
Nice work ❤
Thank you! 😊
It would be great if we could have an admin/user login system video of how to implement it using firebase as the database for it .
Thank you @Milos Mimic for this great suggestion, I will be trying to come up with that particular video in future. Thanks
Good to learn
Thanks for liking
excellent
Thank you! Cheers!
thansk bro
You are welcome @Pablo Saltos Free
is there any related blog where i can access tutorial code?
can you make this using react native expo app js?
Thanks
Welcome
How to dynamically change the role based on the user login?
can you do this with firebase i really need this for my project i want a login system for user and admin and if the account is admin the user will be directed to admin dashboard/page and if the user is normal user or student it will direct the user to the user page/panel
Hi @Dqrk
I can try to come up with that video in future but it will take time so if you need any urgent help please let me know we get on zoom call or something.
Ultimately the concept will be similar to what we discussed in the video that is. based on the user type we will create/navigate to the appropriate navigation route path.
Thanks
please update the chrome😃. but video explanation is good and helpfull.
Sure I will 😃. , thank you!
Can you make a video on solving pre-rendering errors while building the next js project?
@@CodeWithAamir
Is it secured if i used for real world project?
Yes @waltergermanes4528 the concept we used here is secured and can be used in real world projects as well as long as the user-auth is not compromised, I mean no one can get authenticated without proper credentials.
Please let me know if you need any more help on that.
Thanks
It's work but when redirect to children then it's not displaying children component data 😢
Hi @everythingstogo5882
It should work if configured as explained in the video, can you please share the code snippet where you are getting the issue so I can take an look and suggest the solution.
Thank s
i want to give a particular id access to a link how can i do that pls
Hi dimeji falayi,
The concept or implementation should be the same as we did in this video. We can just replicate the conditions where we are saying that if the user is admin do this thing, similarly here in your case we can say thatt if id is this one then allow certain routes or functions.
I hope it makes sense or you got the idea. Please let me know if you need any more information on that .
Thanks
@@CodeWithAamir can you please give me an example am using Mongodb as database
Hi @demeji falayi,
Like in the code we written following function
function AdminElement({ children }) {
if (CURRENT_USER_TYPE === USER_TYPES.ADMIN_USER) {
return {children};
} else {
return You do not have access to this page!;
}
}
we can change this to something like below
function SpecificUserIDElement({ children }) {
if (CURRENT_USER_ID === SPECIFIC_USER_ID) {
return {children};
} else {
return You do not have access to this page!;
}
}
This way only the specific user will be able to see that content other user wont be able to see that page or the components
I hope it makes some sense. Please let me know if you still need any more information on that.
Thanks
@@CodeWithAamir Thanks so much sir, will contact you as soon as any problem arises
can i get this source code?
Yes @Raja Fahad,
Please send me an email at aamircodewith@gmail.com and I will reply back with the code file we developed in this tutorial.
Thanks
it is save? or no?
Hi @1ryznxx
I did not get your point what you mean by save or no? Can you please elaborate a little bit more. Thanks
@@CodeWithAamir I think he means if it is secure or not.
Hi @chromesavior & @aaaliii4u
As long as your authentication is secure the method we used here for role based routing will work with that much secure as well. So you can use it as you want.
Please let me know if you need any more help on that.
Thanks
please give your github repo link
Hi Nitesh Kumar
I haven’t uploaded the code on git but you can send me the email at “aamircodewith@gmail.com” and I will reply back with the code files.
Thanks
Hi @CodeWithAamir ... do you have a video smooth scrolling to anchor tags on a single page react app, using the latest ant design menu, Previously it was easily achievable using this library react-router-hash-link,
How It Woks
how can i achieve this if now the menu is just
Hi @Altered Thought,
You can still use your Link libraries because menu label can accept the custom react node so you can achieve the same feature by doing something like below
Please let me know if you still face any issues.
Thanks
@@CodeWithAamir worked like a charm, thank you very much!! really appreciate your help bro.
That’s great!
Thanks