At ReactConf 2024, the Remix framework team announced merging the Remix full-stack framework into React Router. They reasoned that Remix was becoming a very thin layer over React Router.
Overview of React Router and Remix
React Router Basics
If you're unfamiliar with it, routers provide a way to render a React component based on the URL and URL parameters. That's the most essential feature. The more advanced features of a frontend router include data loading, loading indicators, and server rendering.
Introduction to Remix
Remix is a full-stack framework for React. It consists of a compiler, a server-side HTTP handler, a server framework, and a browser framework. This framework provides server-side rendering, data fetching from the server, progressive enhancement, and state management. Since Remix provides full-stack data flow, it can handle state management, removing the need for libraries like Redux, React Query, and Apollo. Progressive enhancement means that users who have JavaScript disabled for whatever reason can still click links, submit forms, and use the web app.
The Merger Announcement
Critical Reasons for the Merger
The Remix team decided to merge with React Router because they created a framework based on React Router, they believe that all React developers (who use a framework) should enjoy from automatic code splitting, simplified data loading, and server rendering.
Impact on Existing Projects
The Remix team provided an upgrade path that made it easy for React projects using React Router to use Remix. The next version of Remix is now React Router v7. They will likely provide documentation on upgrading from React Router v6 and from Remix to React Router v7, as they have in the past for upgrading from React Router v5, Reach Router, and RouterProvider. Watch for upgrade documentation and news of an upgrade path in the next six months.
Evaluating Your Options
If you are happy with React Router v6 and have been using some of the features that Remix has through other libraries, you should evaluate the current Remix framework and see what it provides compared to what you already have. It may make sense to look forward to an upgrade to React Router v7 (aka Remix v3).
You should take into account the level of effort it would take to upgrade and whether the code base is existing or a new project. If it's a new project, you can evaluate React Router v7 as a framework choice amongst Next.js and other React framework choices.
Suppose all you need is a router for your React pages and components, and you want to avoid any advanced features that React Router v7 will provide. In that case, you should evaluate sticking with React Router v6 or considering the following alternatives to React Router.
Alternatives to React Router
Wouter
Wouter is a well-maintained routing library for React. It has minimal dependencies, is small (2.1 KB gzipped), and has the same basic components as React Router (Link, Switch, Redirect). It provides hooks for the location, the route, and the router, and the API is simple.
TanStack/router
The TanStack/router is a React router written in TypeScript so it's typesafe and it includes built-in caching. It is lightweight (12 KB) and has a lot of functionality. It goes beyond what wouter provides and has overlaps with features that React Router provides such as nested routes, file-based route generation, and automatic route prefetching.
They provide a migration guide from React Router to TanStack/router that you can follow.
Conclusion
The JavaScript and React ecosystems move very fast. The merging of React Router with Remix is one such change. Another change is the encouragement of using frameworks when creating new React projects, deprecating the previous way of using create-react-app. The frameworks modernize the React developer experience and introduce new possibilities for frontend engineers to build great web apps. However, each change also needs to be evaluated before it's implemented, perhaps your project doesn't need all the features provided by a framework, maybe another router instead of React Router works better for your use cases, or possibly it's time to commit to a framework instead of cobbling together random React libraries.
Staying up to date in the tech industry is vital. If you are using React, check out the React blog, the blogs of your favorite React framework, and the GitHub code repos for the React libraries that you use.
Check out ReactConf; it can provide insight into where the industry is going.
Top comments (1)
There's a blog post about fullstack frameworks and Laravel (a PHP framework):