Pobieranie danych ładowania na podstawie parametrów URL w React Router

W poprzedniej lekcji napisaliśmy funkcję do pobierania danych strony produktu, zaimportujmy getProduct w pliku product.jsx:

routes/product.jsximport { getProduct } from '../forStorage';

Napiszymy funkcję ładowania loader zaraz po imporcie i przed funkcją Product. Przekażmy do niej parametry URL:

routes/product.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

Również zaimportujmy hook useLoaderData aby użyć danych uzyskanych przez ładowanie:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

Zastosujmy useLoaderData, odpowiednio zastępując linię z tworzeniem obiektu product na początku funkcji Product na następującą:

routes/product.jsxconst { product } = useLoaderData();

I, oczywiście, zmienimy trochę nasz szablon, ponieważ usunęliśmy stary obiekt product. Zamieńmy zawartość akapitów:

routes/product.jsx<p>Nazwa: {product.name}</p>
<p>Koszt: {product.cost}</p>
<p>Ilość: {product.amount}</p>

Na następujące:

routes/product.jsx<p>Nazwa: {product.name ? product.name : <i>bez nazwy</i>}</p>
<p>Koszt: {product.cost ? product.cost : <i>nieznany</i>}</p>
<p>Ilość: {product.amount ? product.amount : <i>nieznana</i>}</p>

Pozostało nam otworzyć main.jsx i dodać tam import loader, nazwijmy go productLoader:

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

I wpisać go jako ładowanie dla obiektu trasy strony z produktem, dodając go do children po właściwości element:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
],

To wszystko, z ładowaniem danych dla strony produktu sobie poradziliśmy! Prawda, ładować na razie nie mamy czego. Uruchom aplikację, dodaj kilka produktów i kliknij na nie na liście, żeby się upewnić, że wszystko działa.