Տվյալների ավելացում React Router-ում

Նախորդ դասերում մենք պատրաստեցինք բեռնիչ և տվյալների բեռնաթափում կոնկրետ երթուղով պահեստից: Հիմա եկեք ծանոթանանք մեր հավելվածի օրինակով, թե ինչպես ավելացնել նոր ապրանք և գրանցել դրա տվյալները պահեստում:

Բացենք root.jsx ֆայլը և ավելացնենք մակետում նոր ապրանք ավելացնելու կոճակ nav-ից առաջ՝ այն փաթաթելով ֆորմայի տեգի մեջ: Նաև հիմա կոճակը և մեր ցուցակը փաթաթենք ևս մեկ դիվի մեջ #menu-ով: Մակետը հիմա կլինի այսպիսի տեսք:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">ավելացնել ապրանք</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Անանուն</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>այստեղ ապրանքներ չկան ...</i>
      </p>
      )}
    </div>

    <div id="product">
      <Outlet />
    </div>
  </div>
);

Եթե մենք հիմա գնանք 'Ցանց' ներդիր մշակողի վահանակում, ապա սեղմենք մեր կոճակիկը, կտեսնենք սխալ հարցում դոկումենտի՝ սերվերին: Օգտագործելով React Router-ը մենք նորից կօգտվենք երթուղավորմանից հաճախորդի կողմում՝ բացառելով հարցումը սերվերին:

Դրա համար եկեք փոխենք form տեգը React Router-ի Form կոմպոնենտով: Ավելացնենք սկզբի համար Form-ի իմպորտը:

routes/root.jsximport { Form } from 'react-router-dom';

Հիմա փոխարինենք form տեգերը կոդի կտորում.

root.jsx<Form method="post">
  <button type="submit">ավելացնել ապրանք</button>
</Form>

Վերաբեռնեք մեր հավելվածը և նորից նայեք մշակողի վահանակին: Սեղմենք ապրանք ավելացնելու կոճակը - հիմա սերվեր հարցում արդեն չկա (սխալին առայժմ ուշադրություն մի դարձրեք):