I Found the Best React Router Library - Tanstack Router Crash Course in 25 minutes
847 بار بازدید -
4 ماه پیش
-
Hi all, this is a
Hi all, this is a Crash Course for Tanstack React Router. In this tutorial, I will be covering a lot of different Tanstack React Router Features like Setting up file-based routes, flat and nested routes, accessing query/search and URL params, loading data for pages etc.
Code: https://github.com/usmanabdurrehman/t...
You can follow me on:
Instagram: usmanabdurrehman97
Twitter: usmanselen
00:00 Intro
00:07 Setup for Vite Projects
00:57 Root Layout
01:33 Outlet Component
02:22 Exploring Route Gen Tree
02:53 Steps for Non-Vite Projects
03:30 Linking Route Tree with Router
05:01 Adding First Route
05:27 Lazy Loading Routes
06:09 If Automatic Route Tree Generation does not work
06:26 Adding Second Route
07:56 Adding Links
08:43 Dev Tools
09:44 Styling Links
10:25 Prefetching Routes
11:24 Directory Routes
12:58 Loading Data using loader function
14:41 Using Loader Data
15:23 Showing Pending/Loading Component
16:20 Navigating to a route with Query/Search params
16:39 validateSearch function
17:34 Adding Search/Query params in URL
18:54 beforeLoad function
19:13 Using Search/Query params inside loader
20:07 Adding a Variable/Param Route
20:53 Loading Data in Variable Route using loader function
21:29 Getting URL params inside loader function
22:44 Navigating to another route
23:11 Navigating to route with URL params
23:54 Adding Custom Not Found Component
24:33 Showing Not Found Component for No Resource Found from DB
25:45 Adding Custom Error Component
26:18 Outro
Code: https://github.com/usmanabdurrehman/t...
You can follow me on:
Instagram: usmanabdurrehman97
Twitter: usmanselen
00:00 Intro
00:07 Setup for Vite Projects
00:57 Root Layout
01:33 Outlet Component
02:22 Exploring Route Gen Tree
02:53 Steps for Non-Vite Projects
03:30 Linking Route Tree with Router
05:01 Adding First Route
05:27 Lazy Loading Routes
06:09 If Automatic Route Tree Generation does not work
06:26 Adding Second Route
07:56 Adding Links
08:43 Dev Tools
09:44 Styling Links
10:25 Prefetching Routes
11:24 Directory Routes
12:58 Loading Data using loader function
14:41 Using Loader Data
15:23 Showing Pending/Loading Component
16:20 Navigating to a route with Query/Search params
16:39 validateSearch function
17:34 Adding Search/Query params in URL
18:54 beforeLoad function
19:13 Using Search/Query params inside loader
20:07 Adding a Variable/Param Route
20:53 Loading Data in Variable Route using loader function
21:29 Getting URL params inside loader function
22:44 Navigating to another route
23:11 Navigating to route with URL params
23:54 Adding Custom Not Found Component
24:33 Showing Not Found Component for No Resource Found from DB
25:45 Adding Custom Error Component
26:18 Outro
4 ماه پیش
در تاریخ 1403/02/05 منتشر شده
است.
847
بـار بازدید شده