Adding Data to React Router

In previous lessons we prepared a loader and data unloading along a specific route from the storage. Let's now get acquainted with the example of our application how to add a new product and write its data to the storage.

Let's open the root.jsx file and add a button to the layout to add a new product before nav, wrapping it in a form tag. We'll also now wrap the button and our list in another div with #menu. The layout will now look like this:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">add product</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>Unnamed</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>no products here ...</i>
      </p>
      )}
    </div>

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

If we now go to the 'Network' tab of the developer toolbar and then click our button, we'll see an erroneous document request to the server. With React Router, we'll use client-side routing again, eliminating the request to the server.

To do this, let's change the form tag to the Form React Router component. First, let's add the Form import:

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

Now let's replace the form tags in the code snippet:

root.jsx<Form method="post">
  <button type="submit">add product</button>
</Form>

Restart our application and look at the developer panel again. Click the add product button - now there is no request to the server (ignore the error for now).