React Router v6 - Protected Routes, Nested Routes, Active Link, Search Params with Auth Project

Описание: Nearly every react application has a react-router to make routes. React Router allows you to make routers in the react application with advanced features. for example, Protected Router, Nested Router, Active Link, Search Parameter, Index Router. Along the way we can also learn react-router hooks like useRouter(), useNavigate() and more.
In this project, we are going to make a mock authentication and add protected routes to understand how react-router is useful to make restricted routes in react. we also going to learn how to use useNavigate() and useLocation() Router hooks.

If you want to learn next.js from the beginning here is the link:

NextAuth Course - Complete Authentication with Credentials, Google & GitHub
   • NextAuth Course - Complete Authentication ...  

Complete CRUD Operation With Next.js & MongoDB - For Beginners
   • Complete CRUD Operation With Next.js & Mon...  

Next.js Complete Course For Beginners
   • Learn Complete Next.js Course in 2 Hours -...  

Tailwind CSS Complete Course
   • Tailwind Complete Course For Beginner to A...  

How to Make Blog Website with Next.js & Tailwind CSS - For Beginners
   • How to Make Blog Website with Next.js & Ta...  

Javascript Complete Course
   • Learn Complete JavaScript Course From Scra...  

You can Follow Along with me using the below Git Repository.
Use "git branch --list" to see all branches.

📂 Source Project
📦https://github.com/akashyap2013/react...

⏱️ Timestamps ⏱️
00:00:00 - Basic Routes
00:14:46 - Nested Router
00:18:40 - List Invoices
00:33:26 - Filter Invoices
00:40:29 - Index Routes
00:43:41 - Active Links
00:48:12 - Search Parameter
00:59:11 - Persist URL
01:07:28 - Auth Project
01:13:12 - useRoutes()
01:18:21 - Navigation
01:25:59 - createContext()
01:33:38 - useReducer()
01:43:03 - Active NavLinks
01:48:14 - Protected Routes
01:55:19 - Bonus
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑


👉 Support Me on Patreon 😊:
  / dailytuition  

🚀 Udemy Courses:
https://www.udemy.com/user/akshay-kas...

🎅 Playlist :
Complete MERN Series
   • Getting Started with MERN Stack Application  
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑

🛠️ Tools I use:
🟠 My Theme:    • Finally, I am Back! Starting with the Visu...  
🟠 Font Family: https://fonts.google.com/specimen/Rub...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑

👉 Follow us:
🟠  / akki.2013  

More Videos:

💡 Complete Node Course
   • Complete Node & Express with 5 Projects - ...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 React Complete Tutorial
   • Complete React 16.8 Crash Course For Begin...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
   • Complete Mobile Shopee E-Commerce Website ...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Portfolio Website with Bootstrap - HTML/CSS
   • Complete Portfolio Website with Bootstrap ...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Create a Shopping Cart Using PHP and Mysql
   • Create Shopping Cart Using PHP and Mysql  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Advanced Tic Tac Toe With HTML, CSS & JavaScript - For Beginners [2022]
   • Advanced Tic Tac Toe With HTML, CSS & Java...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete CRUD Operation with PHP MySql Database
   • Complete CRUD Operation with PHP MySql Dat...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Birthday Remainder Application with React - For Beginners
   • Birthday Remainder Application with React ...  
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Bootstrap Grid System The Complete Guide - In Action
   • Asp.net Registration Form with SQL Databas...  


Like this video If you find anything useful. Share with your friends that is all for now I will see you In the next one.

Thank You...! 🙏

⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑

Tags: #react #authentication #project