Exploring TanStack Router on a React project to learn the core features of this new typesafe router, together.
Today we'll see how you can protect some routes with guards, allowing only authenticated users to see them, or redirect them to the login page.
Source code: github.com/Balastrong/tanstac...
_______________________________
Hit like and subscribe for more content! :D
Beginner-Friendly Open Source Projects: github.com/DevLeonardoCommunity
Join the Discord community! Here's the invite: / discord
You can also follow me on the other platforms:
Twitter: / balastrong
dev.to: dev.to/balastrong
Home: leonardomontini.dev/
TikTok: / balastrong
GitHub: github.com/Balastrong
Instagram: / devbalastrong
_______________________________
TIMESTAMPS
00:00 Overview
00:18 Login route
01:00 Define the guard and redirect
02:22 Using a react hook
06:03 Protect multiple routes
07:12 Hide authenticated from the URL
08:22 Organized and controlled routes
#tanstack #router #reactrouter
Thanks! Best information on Tanstack Router out there! I got a little confused in the end about the login.tsx. It was kept importing the old ../utils/auth.ts? I haven't been able to make it work either because of this or because I've trying to apply it to an older JavaScript (no typescript) project.
Awesome! please keep continue this series.
This is what exactly i needed.Thank you
Hi I'm a bit confused in the last part. I created _authenticated.tsx and in the _authenticated FOLDER I have the same 2 files as you. But when I try to call the beforeLoad method on my _authenticated.tsx, it wont apply to the _authenticated folder. And it's also been show in the video
Oh nvm. I tried to clone your repo, updated my dependency of tanstack to be the same as you. It works. Many thanks. Subcribed !
The development of the library is quite active so things might change if you have a different version. Great to hear updating it to the latest worked fine! :D