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.
ReactJS Complete Tutorial: • ReactJS Course for Beg...
Github Repo: github.com/thi...
I hope you enjoy this video and learn something new.
If you do not know JavaScript, then you must learn JavaScript before starting ReactJS, and I have an amazing FREE course for JavaScript to help you learn JS - www.studytonig...
Follow me on Instagram:
Studytonight with Abhishek - / study.tonight
Abhitonight (Hindi Reels) - / abhitonight
LinkedIn: / ahlawatabhishek
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

[@kmdoll]

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

[@vaibhavkadu140]

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

[@juansalinas788]

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

[@Studytonight]

Were you able to fix this?

[@juansalinas788]

@@Studytonight I left it like that, friend

[@TheFinanceFix-bb6hx]

thanks sir

[@omarsam1]

Thanks, Bro

[@Studytonight]

My pleasure :)

[@kiranaryal1877]

Thankyou brother

[@Studytonight]

Thanks for the comment brother 🥰

[@sanujitmajhi4232]

import './App.css'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // Import Routes and Route import { Home } from './pages/Home'; import { Login } from './pages/Login'; import { Header } from './components/Header'; import { Private } from './utils/Private'; function App() { return ( {/* Wrap Route in Routes */} {/* Wrap Route in Routes */} ); } export default App; bro why it is not woking

[@gopinathkrm58]

nice

[@Studytonight]

Thanks

[@kashmirtechtv2948]

Why this root, router file and userouter context

[@Studytonight]

Root for Layout, Router file to define the Routing mechanism, and context to supply states to each child component.

[@justarshad404]

informative video

[@Studytonight]

Thanks :) Watch other videos in this Playlist too

[@theoronno7709]

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

[@Studytonight]

@@theoronno7709 hmmm 🧐 I will keep that in mind while creating the future videos. Thanks for the comment.