# Использование данных, полученных загрузчиком в React Router

На прошлом уроке мы получили данные из хранилища при помощи `loader`. Для того, чтобы воспользоваться этими данными, мы используем хук `useLoaderData`. Откроем файл `root.jsx` и добавим хук в импорт:

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

В функции Root мы будем теперь получать данные в константу `products` и работать уже с ней. Если у нас есть какие-то продукты, то список отобразится, если нет, то выведем в абзаце `'no products here ...'`. В теге `nav` мы теперь используем стандартный цикл для вывода полученных продуктов. Каждый элемент будет обернут в компонент `Link` и адрес будет у каждого свой (об этом мы поговорим позже). Соответственно, если у продукта нет названия, то выведется `'Unnamed'` по умолчанию. Итак, учитывая вышесказанное, теперь наш код для функции `Root` будет таким:

`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> ); }`

Если мы сейчас перезапустим приложение и зайдем на главную страницу, то увидим только `'no products here ...'`, поскольку никакие продукты в хранилище мы еще пока не положили.

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, добавьте отображение полученных из загрузчика данных со студентами, как описано в уроке.

← →
↑