Использование данных, полученных загрузчиком в 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 ...',
поскольку никакие продукты в хранилище
мы еще пока не положили.
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, добавьте отображение полученных из загрузчика данных со студентами, как описано в уроке.