React Router-da yana bir marshrut qo'shish

Bizda asosiy sahifaga olib boradigan ildiz marshruti mavjud, unda mahsulotlar uchun havolalar bor. Keling, endi yana bir marshrut qo'shamiz, shunda havolalarning birini bosganimizda, xato sahifasi o'rniga mahsulot uchun sahifa ko'rsatilsin.

Boshlash uchun oldingi darslarda yaratgan ilovamizni ochamiz va routes papkasida product.jsx faylini yaratamiz. Unda Product komponentini yaratamiz:

routes/product.jsxfunction Product() {}

export default Product;

Endi Product ichida product obyektini yaratamiz, uning name, cost va amount xususiyatlari bo'lsin, hozircha bu ma'lum bir belgilangan qiymatlar bo'lsin:

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

Va mahsulot sahifasida biz, mos ravishda, uning nomi, narxi va miqdorini chiqaramiz:

routes/product.jsxreturn (
  <div>
    <h2>Mahsulot sahifasi</h2>
    <p>Nomi: {product.name}</p>
    <p>Narxi: {product.cost}</p>
    <p>Miqdori: {product.amount}</p>
  </div>
);

Albatta, Product komponentini main.jsx fayliga import qilamiz:

main.jsximport Product from './routes/product';

Va nihoyat, ilovamizga yana bir marshrut qo'shamiz, buni ildiz marshrutidan keyin darhol qilamiz. Yo'l sifatida 'products/:productId' ni ko'rsatamiz, va ko'rsatish uchun element sifatida Product komponenti ishlaydi:

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

Endi ilovani ishga tushiramiz, havolalarni bosamiz va mahsulot sahifasiga o'tamiz (hozircha u barcha havolalar uchun bir xil), xato sahifasiga o'tmasdan.