Recently in V6.4 React Router released a new feature where we can fetch data on the fly before rendering UI on the basis of routes. It is called a Loader in React Router Terms.
The era in which we live is evolving rapidly, and along with this rapid growth, our app has become more complex. Despite this complexity, we must not neglect the user experience. We often encounter challenges when fetching data or ensuring that we display loaders to provide a better user experience. We usually handle all these tasks manually, which can be very tedious. React Router offers a solution by automating the handling of data fetching logic and determining when to display errors or loaders.
Introducing Loaders
Loaders are functions that are associated with specific routes and are responsible for fetching data before the corresponding component renders. This ensures that the data is available to the component as soon as it mounts, eliminating the need for additional data fetching within the component itself. So we do not need to write a useEffect in the component to fetch data as it loads.
Practical Example
In the past, we utilized routers like the one shown in the screenshot. To define individual routes, we employed the Routes component and added Route comments. This methodology remains functional and is not deprecated.
Nonetheless, a newer approach has emerged, involving the createBrowserRouter function. This function takes an array of JSX elements as input and generates a routes object. This route object can then be incorporated into the Routes component.
You can see in the above code there few things which might look a bit new.
Top-Level and Individual Error Handling
React Router v6 introduces the errorElement prop, which allows you to define a custom error component that will be displayed when an error occurs while navigating to a route. You can set this prop at the top level, and it will apply to all routes unless overridden at the individual route level.
Data Fetching with loader Function
The loader function allows you to fetch data before rendering a route component. This function receives a context object that provides access to the route parameters and the navigation state. The returned data will be made available to the route component through a hook.
Extracting Data from Components
React Router v6 provides a hook that allows you to extract data from a route component. This hook is useful for accessing data that was injected by the router, such as the route parameters or the navigation state.
Handling Loading States
React Router v6 provides a hook that gives you the current state of the application, indicating whether it is idle or loading. You can use this hook to show a loading indicator or disable certain UI elements while the application is loading data.
Conclusion
With its improved route definition, error handling, data fetching capabilities, and loading state management, React Router v6 emerges as an enhanced and more versatile tool. I hope this blog explains you well enough still there is a lot to learn, and for that, you can always visit their docs.