Snipcart data-item-url price don't match React

Question

I have an issue when trying to use Snipcart with a Reactjs webpage, I know that the URL should be where your buy buttons are, but in my case I have buttons on different pages, so I'm trying to do it dynamically, like this:

import "./itemList.css";
import { Col } from "react-bootstrap";
import { Link } from "react-router-dom";

function ItemList({ name, price, id, info, categ }) {
  // var product_page = useLocation()
  return (
    <Col className="mx-auto" xs="12" sm="12" md="4" lg="4" xl="4">
      <div className="itemCard">
        <figure>
          <img
            className="img-item"
            src={`/assets/${name}.jpg`}
            alt={`${name}`}
          ></img>
        </figure>
        <div className="infoBox">
          <h1>
            <Link to={`/item/${id}`} className="ver">
              {name}
            </Link>
          </h1>

          <p className="item-info">{info}</p>
          <button
            className="agregar snipcart-add-item"
            data-item-id={id}
            data-item-price={price}
            data-item-url={`/categories/${categ}`}"
            data-item-name={name}
            data-item-image={`/assets/${name}.jpg`}
            data-item-custom1-name="Servings"
            data-item-custom1-options="1|2[+100.00]|3[+200.00]|4[+300.00]"
          >
            Add to cart (${price})
          </button>
        </div>
      </div>
    </Col>
  );
}
export default ItemList;

The problem is that when I try to place my order the next message appear: Product crawling error Defined product prices don’t match prices in cart, or products couldn’t be found at crawled endpoint. Review product IDs, prices, and URLs. This entry on Order validation might help. See developer console for more details. If someone could help me I will appreciate it I let you my app.js file in order to see the routes, thanks!

import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Header from "./components/header/header";
import HeaderItems from "./components/header-items/header-items";
import Home from "./components/home/home";
import ItemListContainer from "./components/itemListContainer/itemListContainer";
import AllItems from "./components/AllItems/allItems";
import Footer from "./components/footer/footer";
import ProductDetailContainer from "./components/ProductDetail/productDetailContainer";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Redirect to='/home' />
        </Route>
        <Route exact path='/home'>
             <Header />
            <Home />
            </Route>
        <Route exact path="/categories/:categ">
          <HeaderItems />
          <ItemListContainer />
        </Route>
        <Route exact path="/categories">
          <HeaderItems />
          <AllItems />
        </Route>
        <Route path="/item/:id">
          < ProductDetailContainer />
        </Route>
      </Switch>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

Answer 1

When you have Single Page app like React, you should use JSON Crawler method for validating orders. Basically you have to create one JSON file where you will have items with their ids and prices. So it should look like this:

[
  {
    id: "item_1_id",
    price: "item_1_price"
  },
  {
    id: "item_2_id",
    price: "item_2_price"
  }
]

Now, for the data-item-url you should specify the url to that JSON file. This JSON file should be somewhere publicly available so Snipcart can go and validate your cart items with that JSON file.