Learn React Router v6 ( Part - 2)

 Introduction

In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc.

Let's explore some advance concepts of react router makes react developers more simpler.

1) Loader 

Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components

We have two steps to implement loader into the system .

First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where we put the fetching data logic and return the data . 

In this example , we are implementing the  async function which  is used to also await the response and convert into the json . We are fetching data from the fake rest api from the json placeholder where we are fetching data through the javascript fetch Browser Api and return the result. 

 
Second Step :- At last we will import the useLoaderData  function from the react-router library which gets the data that we returned from the loader function and will map out all the elements from the returned data .

2) Action

When we want to send data back to the server from the user input , we use action in the route definitions . Just like the loader , action also take function as their value but only difference is action used to send data back to the server , which generally used to perform post , patch requests.

There are two steps to implement actions and send http request request :-

First step:- We specify the action property in the route definitions and place a function for sending http request , by default we get a object from the parameter values name request and params , through which we get the data from the forms and extract the user entered fields into the fetch .

In this example , we are performing post request with the json placeholder fake rest api and fetch the user entered title and description from the request object and place into the fetch body and later we redirected to the home page after sending http request

Note:- title and description are the values of name attribute in the form

Second step :- We use the Form component from the react-router-dom  and specify the name fields from which we have extracted in the action function . This form component will be created where we are defining the action function.

3) Error Component and Error handling

We can also perform the error handling in the action and loader function with some few concepts and handle error for different conditions

First step:- In the beginning,  whenever some error occurred  we throw the error with json utility from the react-router , in the first parameter the message property we specify the message and specify the status code in the second parameter

Second step:- Put the Error Page component in the parent component , and whenever the error occurred in any component , it will bubble out to the top and error page will be rendered instead of some react-route error page. The Error Page component specify in the special prop name errorElement  which takes jsx or component as value.

Third step:- At last , we create the ErrorPage component where we import he special function useRouteError  through which we extract the thrown error from the path which has error handling code.

The second parameter we specify the status is used to conditionally display the message of the error and that's how we implement the error page. Through the json utility function we don't need to parse the message and can used it directly . That's why we didn't throw the error with Response object of Browser api and used the utility function provided by the react-router dom.

4) Defer

Sometimes when we load data from the server it takes some time , and our component also doesn't load until we get the data from the backend  and it looks like to the user there is nothing happening and gives the bad user experience . 

So we use the defer which loads the component event we don't get the data and display the fallback UI to provide the good user experience. We can use it according to our need and only in the apis where the fetching data from the server takes time and has heavy data at the backend.

First step:- In the beginning , we import the defer function from the react-router , and specify the loader function as the value to the defer object . In this example ,  the todos 

property in the defer, we specify the loadTodos function.

Second step:- After that , we import the suspense component from the react to display the fallback UI and Await component from the react-router used to render the component and await the data until the data doesn't load.

Await component wraps around the Suspense component , has the prop name resolve that takes the todos object that we have extracted from the useLoaderData() and under that as a function we return the component and use the data from the parameters in the function.

So, that's how we can use the advance concepts of the react-router and use in our daily life routing . These concepts are pretty easy to implement just practice and play with the code .I will share the code sandbox link so you can try you hands with the code .

Code sandbox link👇

https://codesandbox.io/s/silent-sky-mm48hr?file=/src/components/Products.js

Thank you for reading:)