Role Based Routing in React JS | Role Based Navigation Links | React Router Dom tutorial

#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

In case of any question please let me know in comments below.

Happy Coding!

[Oceancoastwaves]

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.

[Waltuuuh]

This helped me with my final year project. Thank you very much!

[NasirKhanPk]

a very nice way to explain things & controls over components

[veervirk]

Thanks to show new concept...its really helpful to understand role based routing. Great work sir

[aaaliiiu]

Awesome tutorial Amir, super easy. Thanks a bunch!

[naveens]

Worth content 😍 if possible please put a video for bulk data upload in material ui data grid.

[arnaudpoutieu]

Enterprise Grade content here !!! Many thanks

[lothrickk]

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 .

[eismgps]

What if the user is able to change the js code in the browser then he can easily set the curremt user property

[j_]

How to dynamically change the role based on the user login?

[joshuaagena]

can you make this using react native expo app js?

[xbewotw]

is there any related blog where i can access tutorial code?

[apurvkhalas]

please update the chrome😃. but video explanation is good and helpfull.

[dqrk]

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

[everythingstogo]

It's work but when redirect to children then it's not displaying children component data 😢

[waltergermanes]

Is it secured if i used for real world project?

[dimejifalayi]

i want to give a particular id access to a link how can i do that pls

[altered.thought]

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,

<Menu.Item key='1'>
How It Woks
<Link to='/#howItWorks' smooth='true' />
</Menu.Item>

how can i achieve this if now the menu is just

<Menu items={[{label: 'How It Works', key:'howItWorks']} />