Using Loader Received Data in React Router

In the last lesson, we got data from the store using loader. To use this data, we use the useLoaderData hook. Let's open the root.jsx file and add the hook to the import:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

In the Root function, we will now receive data in the constant products and work with it. If we have any products, the list will be displayed, if not, we will output in the paragraph 'no products here ...'. In the nav tag, we will now use the standard cycle to output the received products. Each element will be wrapped in the Link component and each will have its own address (we will talk about this later). Accordingly, if the product does not have a name, 'Unnamed' will be output by default. So, taking into account the above, now our code for the Root function will be like this:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

If we now restart the application and go to the main page, we will see only 'no products here ...', since we have not yet put any products in the storage.

Take the application you created in the assignments for the previous lessons. Using the lesson materials, add a display of the data received from the loader with students, as described in the lesson.