React Router v7 Data Mode CRUD Functionality + Vitest

Chapters:
00:00 - Introduction to React Router v7 Data mode
00:15 - React Router v7 data fetching without useEffect
04:23 - React Router v7 useLoaderData hook and Await for loading data
05:37 - Intro to tutorial project
08:13 - Scaffolding application in Typescript
09:08 - Why I'm using createMemoryRouter instead of createBrowserRouter
13:09 - Creating a loader function to fetch and load data from an API only with React Router
14:30 - Create Products component
19:07 - Create ProductsError component
19:15 - Setting up the routes configuration for our app
21:33 - Creating the App component
25:22 - Testing data fetching and loading in the browser
26:00 - How to fix the "No HydrateFallback element provided to render during initial hydration
27:42 - How to post data to an API endpoint using only React Router version 7
29:29 - Create PostProduct function
31:42 - Create postProductAction function
32:28 - Integrating POST route with the app's routes configuration
33:05 - Testing POST request in the browser
33:30 - Unit testing app with Vitest
43:12 - Outro

How to implement CRUD functionality using only React Router v7. No need for useEffect hook nor Tanstack Query to fetch data. I will also teach you how to implement Vitest unit testing for React Router v7.

Please consider subscribing to my channel, it doesn’t cost you anything.
GitHub Repo:

Documentation:

[csinz]

I've been waiting for something like this. Thank you.

[shanewhite]

It's easier to fetch data in React now more than ever! Very nice.

[humongousdeux]

Really glad someone figured this out. 👍

[MikeHotelGolf]

Shopify owns Remix and React Router now?