React Router v6 tutorial in Hindi #11 Protected Route

In this react-router 6 tutorial in Hindi, we learn how to navigate on button click or Navigate programmatically. This video is made by anil Sidhu in Hindi

steps of video
Make Login Page
Make Protected Route
Use Protected Route
Use Local Storage to complete the flow

Complete playlist for react router

[knoladgetv....]

thankss❤ iam not coding student pro but job ke liye apki sari vedios dekta hu apki sari vedios gager me sager vali hoti h short time me kitna kuch sikha dete ho app such me sir super seuper all vedios best of luck ase hee agee vedios amazing bnane ke liye❤❤❤

[sandiproy]

Best protected routing ever! thanks for the video 👏

[amardeepsinghchauhan]

Here's the onclick function to implement the logout functionality =>

function logout() {

navigate("/login");
}

[sidharthvyas]

धन्यवाद अनिल भाई। It hepled me in a critical time.

[kushmunot]

Thanks bhai
i was stuck on this part from last one week but your video saved me
Thank you so much and All the best !!

[ajayshukla]

Many thanks for this quick help on auth routing.

[nikhilkumarjamwal]

Nice i was about to search for this, how we set sessions on our pages!👍

[khanapeena]

using Navigate Cmpoenent is best to use here because in your logic whather the user actuall log in or not they will be able to see desired route page for some mile second then the condition is run in the useeffect so gradually usere to able to needed routes without login so its better to use Navigate Componenet we should use usenavigate on button click something like that

[whysumancode]

Thank You Brother!
We all love you ❤🫶

[important-topics]

Thank for the video very nicely explain as always you did... Short and great

[maxvhanamane]

It works but when you click protected route multiple times in this example i.e home. you see a glimse/flash of the protected route content. How to fix that?

[appify_with_shopify]

Really need this this video at this time... thanks bro 😊

[sahilgoyal]

improved apporach i guess more correct by setting the dependecy array that cause rerenders to affect useEffect hook to initiate
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
const navigate = useNavigate();
const [isLoggedIn, setIsLoggedIn] = useState(false);

const login = () => {
localStorage.setItem('login', true);
setIsLoggedIn(true);
};

useEffect(() => {
let login =
if (login) {
navigate('/');
}
}, [isLoggedIn]);

return (
<>
<button
</>
);
}

[KSHMRGAMING]

Thanks for this video I was stuck at this for so long time...

[bhavamsingh]

Sir please login or signup page system functional component ke through video bna dijiye please

[ravindrap]

hey thanks for this video, could you please provide the code on git, my home page and login page content are not showing after trying this.

[CodeWithAnurag]

What if user change the value of 'login' to true from localstorage? In that case also, user can see all the screens without login.

[ayanonlinee]

Thank You so much 😅, finally I got it 😢

[KaushikR-qqpf]

hi when I call useEffect, I get invalid hook call exception

[prashantpriyadarshi]

is that protected.js component is a HOC ?