Дадаванне яшчэ аднаго маршруту ў React Router

У нас ёсць караневы маршрут, які вядзе на галоўную старонку, на якой у нас ёсць спасылкі для прадуктаў. Давайце цяпер дадамо яшчэ адзін маршрут, каб пры кліку па адной з спасылак у нас адлюстроўвалася староначка для прадукту, а не экран з памылкай.

Для пачатку давайце адкрыем наша дадатак, якое мы рабілі на мінулых уроках і створым у папцы routes файл product.jsx. Зробім у ім кампанент Product:

routes/product.jsxfunction Product() {}

export default Product;

Цяпер створым унутры Product аб'ект product, са ўласцівасцямі name, cost і amount, пакуль гэта будуць некаторыя фіксаваныя значэнні:

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

export default Product;

І на староначцы прадукту мы будзем выводзіць, адпаведна, яго назву, кошт і колькасць:

routes/product.jsxreturn (
  <div>
    <h2>Product page</h2>
    <p>Name: {product.name}</p>
    <p>Cost: {product.cost}</p>
    <p>Amount: {product.amount}</p>
  </div>
);

Абавязкова дадамо імпарт кампанента Product у файл main.jsx:

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

І, нарэшце, дадамо яшчэ адзін маршрут у наша дадатак, зробім гэта адразу пасля каранёвага. У якасці шляху ўкажам 'products/:productId', а ў якасці элемента для адлюстравання ў нас выступае кампанент Product:

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

А цяпер запускаем дадатак, клікаем па спасылках і аказваемся на староначцы з прадуктам (пакуль яна ў нас аднолькавая для ўсіх спасылак), а не з памылкай.