Substituting Redux with React Router for data loading has the advantage of simplifying the logic of the app. However, I can see a few disadvantages:
The data fetching hooks and components like useLoaderData and Await do not have any TypeScript integration. Not even generics. The only way to type the return value is to use the as operator.
A loader is always shown when you enter the page, even if it is the second time you enter it.
The aim of the repo mantainers is not to substitute data fetching libraries like React Query, but to work in combination with them. As mentioned in the guide: (https://reactrouter.com/en/main/guides/data-libs)
Use React Router for timing of data loading, mutations, and navigation state, then use libraries like React Query for the actual implementation of loading, invalidating, storage, and caching.
Maybe this is the reason why the TypeScript integration is so poor. The maintainers want to encourage you to use React Query to store the loaded data.
In my opinion, a solution would be to combine React Router data fetching with Zustand. Inside the React Router loader, you call the Zustand function that loads the data, and store it inside the Zustand store. And the data is then accessed in the component with the Zustand hooks. This way, you don't have to use useEffect to fetch the data. Instead, you fetch the data inside the React Router loader.
Closes #9 Data loading with React Router example.
Substituting Redux with React Router for data loading has the advantage of simplifying the logic of the app. However, I can see a few disadvantages:
asoperator.Maybe this is the reason why the TypeScript integration is so poor. The maintainers want to encourage you to use React Query to store the loaded data.
In my opinion, a solution would be to combine React Router data fetching with Zustand. Inside the React Router loader, you call the Zustand function that loads the data, and store it inside the Zustand store. And the data is then accessed in the component with the Zustand hooks. This way, you don't have to use useEffect to fetch the data. Instead, you fetch the data inside the React Router loader.