Private and Protected Routes in React (using React Router v6)

Показать описание

In this video, I have covered how you can create Private and Protected Components in your reactJS application that can only be accessed after Login or some sort of Authentication.

When you create any Product, you have to setup authentication and authorization and some parts of the application are only accessible after authentication if you have different user roles in your app then you should even check for permissions to access ReactJS components.

In this video you will learn all this, along with best practices for React routing where I have used createBrowserRouter to setup routing, and everything is DECOUPLED, and DISTRIBUTED, hence a SUPER SCALABLE design.

Watch the video till the end, and do leave your precious comments.

I hope you enjoy this video and learn something new.

Follow me on Instagram:

Keywords:
learn reactjs
reactjs tutorial
reactjs complete tutorial
reactjs tutorial 2023
reactjs complete tutorial 2023
reactjs beginner tutorial
react tutorial beginner
react tutorial 2023
learn react 2023
react interview question
reactjs interview question
reactjs projects
protected components reactjs
private components reacts

Рекомендации по теме

Комментарии

Finally!! the solution at 16:59 was so helpful. Thank you!

kmdoll

I have tried this it works well with hardcoded user, I'm having an issue when im fetching user roles using axios and passing it to context, but when user tries url manually and hit enter context becomes null and no aceess or login page gets displayed.

I can fetch logged in user roles in app but how to pass to context as it is in Root? App has route provider

Or in have to call api from protected as well, but i dont want to it because i have landing page same as home in this example, on landing im controlling menus based logged in user roles, I thought of using context user to check if user has required roles to access menu if yes making it visible

vaibhavkadu

I'm using typescript with React and it's not working for me when creating a Router.ts file and separating the routes.

juansalinas

Why this root, router file and userouter context

kashmirtechtv

painful video, too long and half unimportant thing, and wasting time

theoronno

Private and Protected Routes in React (using React Router v6)

The New Way To Create Protected Routes With React Router V6

React protected routes in 4 minutes

Private and Protected Routes in React (using React Router v6)

Protected Routes & Private Routes in React JS with React Router V6 || Role based Routing

How to create Protected Routes and Authentication with React Router V6 2023

Protected Routes In Under 5 Minutes: Next.js

Add Auth & Protect Routes in React in 3 Minutes (Kinde)

React Router Tutorial - 15 - Authentication and Protected Routes

React Router Dom: Public, Private, and Authentication Routes || React JS for Beginners

React Protected Routes | Role-Based Authorization | React Router v6

Protected Routes in React Router v6

Effortless Protected Routes In Next.js Using Middleware

How to Protect Routes in Next.js 14 in 4 Ways - Private Routes - Authorization

Public and Protected routes in React | Private routes in React with beginner level demo

Protected Routes in ReactJS - React Router Dom

🔥 Private Routes in React JS | Managing Login pages | blogging application using React JS | Hindi

Protected Routes in React | Router Redirect | React Router Dom | React Tutorial for Beginners

React Router v6 tutorial in Hindi #11 Protected Route

React Protected Routes example

Private/Protected Routes with react-router-dom version 6 (v6)

Protected Routes in React | Authenticated routes | Routing Guard in React | Private Routes in React

MERN Authentication Tutorial #14 - Protecting API Routes

MERN Authentication Tutorial #16 - Protecting React Routes

How to Protect Routes in Web App | Outlet | React-Router-Dom | Explained in Tamil