Ուրիշ երթուղի ավելացնել 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 />,
},

Իսկ հիմա գործարկենք հավելվածը, կտտացնենք հղումներին և հայտնվենք արտադրանքի էջում (առայժմ այն մեզ մոտ նույնն է բոլոր հղումների համար), և ոչ թե սխալի էջում: