在 Express 中使用 React-router-dom 进行路由时，“添加到购物车”按钮不起作用

Question

我使用react和express制作了一个电子商务网站，单击按钮后，它将产品添加到购物车，但是当我使用react-router-dom“/cart”时，单击按钮后没有任何显示 这可能是什么原因？有其他方法可以实现此功能吗？

这是我的产品.jsx

import PropTypes from "prop-types";

const Products = ({ addToCart }) => {
  const items = [
    { id: 1, name: "Product 1", price: 100 },
    { id: 2, name: "Product 2", price: 200 },
    { id: 3, name: "Product 3", price: 300 },
  ];

  return (
    <div className="p-4">
      <h1 className="mb-4 text-2xl font-bold">Products</h1>
      {items.map((item) => (
        <div key={item.id} className="p-4 border rounded-lg shadow-lg">
          <h2 className="text-lg font-semibold">{item.name}</h2>
          <p className="text-gray-600">${item.price}</p>
          <button
            onClick={() => addToCart(item)}
            className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600"
          >
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
};

Products.propTypes = {
  addToCart: PropTypes.func.isRequired,
};

export default Products;

继承 Cart.jsx

import PropTypes from "prop-types";

const Cart = ({ cartItems }) => {
  return (
    <div className="p-4">
      <h1 className="mb-4 text-2xl font-bold">Cart</h1>
      {cartItems.length > 0 ? (
        cartItems.map((item) => (
          <div key={item.id} className="p-4 border rounded-lg shadow-lg">
            <h2 className="text-lg font-semibold">{item.name}</h2>
            <p className="text-gray-600">${item.price}</p>
          </div>
        ))
      ) : (
        <p>Your cart is empty.</p>
      )}
    </div>
  );
};

Cart.propTypes = {
  cartItems: PropTypes.array.isRequired,
};

export default Cart;

和App.jsx

import { Routes, Route } from "react-router-dom";
import Products from "./components/Products";
import Cart from "./components/Cart";
import { useState } from "react";
import PropTypes from "prop-types";

export default function App() {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (item) => {
    setCartItems((prevItems) => [...prevItems, item]);
  };

  return (
    <Routes>
      <Route path="/" element={<Products addToCart={addToCart} />} />
      <Route path="/cart" element={<Cart cartItems={cartItems} />} />
    </Routes>
  );
}

App.propTypes = {
  cartItems: PropTypes.array,
  addToCart: PropTypes.func,
};

道具已通过，但不路由时工作正常，但路由后似乎不起作用

Answer 1

您的代码似乎是正确的并且应该按预期运行。但是，如果您在浏览器中手动导航到

/cart

页面，则可能会导致问题。当您重新加载或直接访问

cart

页面时，应用程序的状态可能会丢失，这可能会影响功能。为了避免这种情况，请尝试在应用程序本身内导航，而不是刷新或直接输入

/cart

URL。