Запись и редактирование данных по URL параметрам в React Router

Наше приложение теперь может загружать данные для каждого отдельного продукта из хранилища. На этом уроке мы начнем реализовать добавление информации о продукте и ее редактирование по URL параметрам.

Для того, чтобы заносить или изменять данные мы будем снова использовать компонент Form. Для начала давайте откроем product.jsx и добавим в конце верстки кнопочку для редактирования данных продукта - после последнего абзаца (не забудьте импортировать Form в файл):

routes/product.jsx<Form action="edit">
  <button type="submit">edit</button>
</Form>

Теперь у нас на страничке продукта есть кнопка редактирования. Далее мы сделаем так, чтобы при нажатии на эту кнопку нас перебрасывало на страничку с формой, где мы сможем вносить данные. Для этого, мы создадим еще один маршрут с products/:productId/edit. Давайте сделаем для этого макет.

Итак, в папке routes мы создадим новый файл edit.jsx. Здесь у нас будет форма с полями name, cost и amount для заполнения, а также кнопкой сохранения. Все это у нас будет в компоненте EditProduct. Обязательно пропишем атрибуты name, они нам понадобятся в следующих уроках:

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

function EditProduct() {
  return (
    <Form method="post" id="product-form">
      <div>
        <span>Name:</span>
        <input placeholder="name" type="text" name="name" />
      </div>
      <div>
        <span>Cost:</span>
        <input placeholder="cost" type="text" name="cost" />
      </div>
      <div>
        <span>Amount:</span>
        <input placeholder="amount" type="text" name="amount" />
      </div>
      <p>
        <button type="submit">save</button>
      </p>
    </Form>
  );
}

export default EditProduct;