React Router Devtools home page

The Network tab traces all the network requests that are happening in your application.

It shows you all the requests in real-time, with the ability to see if they are aborted, if they are cached, and if they are successful or not.

Clicking on a request will show you detailed information about that request. Additionally, you can shuffle through the requests with your keyboard. To shuffle through the requests, press the ← and → keys.

Request types

There are four types of requests in react-router-devtools:

  • client-loader - A client-loader is a request that is initiated by the client and is used to load data for a route.
  • client-action - A client-action is a request that is initiated by the client and is used to submit data to a route.
  • loader - A loader is a request that is initiated by the server and is used to load data for a route.
  • action - An action is a request that is initiated by the server and is used to submit data to a route.

You should know!

Each of these is colored differently for you to be able to quickly identify them.

  • loader - green
  • client-loader - blue
  • action - purple
  • client-action - yellow
  • aborted requests - red

Request info

Clicking on any request name will show you detailed information about that request. This includes the request's name, the request's method, the request's status, the request's start time, the request's end time, the request's type, the request's data, the request's headers, and if the request's cached.

Aborted requests

If a request is aborted, it will be shown in red. This means that the request was aborted by the user.

Next
Errors Tab