Switching from Remix to React Router: Codemod, Config & Type-Safe Context

Welcome back to The Gray Cat!

This video is the final step in our journey from Remix v2 to the future with React Router v7. This guide assumes you have already enabled all the future flags as shown in my previous video. If you missed it, the link is right at the top of the description!

In this step-by-step tutorial, we'll pick up where we left off and complete the migration using the official codemod to speed things up. I'll walk you through every critical change, including:

- Running the codemod to automate most of the work.
- Updating your `package.json` scripts from `remix` to `react-router`.
- Creating the new `react-router.config.ts` file.
- Manually handling changes the codemod might miss.
- A deep dive into the new type-safe `AppLoadContext`.

I'll also show you my trick for locking package versions to avoid any future "cat-astrophes"! 😼

By the end of this video, your application will be fully running on React Router v7, setting you up with a modern and more type-safe foundation for future development.

If you found this guide useful, please consider liking the video and subscribing to The Gray Cat to help the channel grow. See you in the next one!

#Remix #ReactRouter #JavaScript #Migration #Codemod #WebDevelopment #TheGrayCat

## Resources

- **[IMPORTANT] Part 1 - Enabling Future Flags:** https://www.youtube.com/watch?v=ZCkY1wwqwKs
- **Official React Router Migration Guide:** https://reactrouter.com/upgrading/remix

## Timestamps

00:00 - Introduction & Prerequisites
00:27 - Running the Codemod
01:06 - Updating package.json & Scripts
01:33 - The new react-router.config.ts
02:28 - Explaining the Type-Safe AppLoadContext
03:30 - Final Checks & Running the App

Видео Switching from Remix to React Router: Codemod, Config & Type-Safe Context канала The Gray Cat