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

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

routes/root.jsximport { Outlet, Link, useLoaderData } from 'react-router-dom';

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

root.jsxfunction 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 ...', поскольку никакие продукты в хранилище мы еще пока не положили.