How can you preload data for a route in React

Question

Can i know How can you preload data for a route in React?

Answer 1

Preloading Data for a Route in React (React Router v6.4+)

You can preload data using the loader function in createBrowserRouter. This fetches data before rendering the component.

1. Define a Route with a loader

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import Home from "./Home";

import PostDetails from "./PostDetails";

const router = createBrowserRouter([

  {

    path: "/",

    element: <Home />,

  },

  {

    path: "/post/:id",

    element: <PostDetails />,

    loader: async ({ params }) => {

      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);

      return response.json();

    },

  },

]);

const App = () => <RouterProvider router={router} />;

export default App;

2. Access Preloaded Data Using useLoaderData

import { useLoaderData } from "react-router-dom";

const PostDetails = () => {

  const post = useLoaderData(); // Retrieves preloaded data

  return (

    <div>

      <h2>{post.title}</h2>

      <p>{post.body}</p>

    </div>

  );

};

export default PostDetails;