使用react-router-dom路由时Add to Cart按钮失效问题排查

可能原因 #

你遇到的核心问题是页面刷新导致React组件状态丢失：

• 若通过原生<a>标签跳转或手动刷新/cart页面，浏览器会重新加载整个React应用，App组件里的cartItems状态会被重置为空数组，因此购物车显示为空。
• 不用路由时，Products和Cart组件在同一页面渲染，状态不会因页面刷新丢失，所以功能正常。

解决方法 #

方法1：使用React Router的<Link>实现无刷新跳转 #

用react-router-dom提供的<Link>组件替代原生a标签，实现单页应用的客户端路由跳转，避免页面刷新导致状态丢失。

修改App.jsx，添加导航链接：

import { Routes, Route, Link } 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 (
    <div>
      {/* 添加导航栏 */}
      <nav className="p-4 bg-gray-100">
        <Link to="/" className="mr-4 text-blue-500 hover:underline">商品列表</Link>
        <Link to="/cart" className="text-blue-500 hover:underline">购物车 ({cartItems.length})</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Products addToCart={addToCart} />} />
        <Route path="/cart" element={<Cart cartItems={cartItems} />} />
      </Routes>
    </div>
  );
}

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

方法2：持久化购物车数据到localStorage #

即使页面刷新，也能从localStorage恢复购物车数据，保证数据不丢失。修改App.jsx的状态初始化和更新逻辑：

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

export default function App() {
  // 从localStorage初始化购物车数据
  const [cartItems, setCartItems] = useState(() => {
    const savedCart = localStorage.getItem("cartItems");
    return savedCart ? JSON.parse(savedCart) : [];
  });

  // 当cartItems变化时，保存到localStorage
  useEffect(() => {
    localStorage.setItem("cartItems", JSON.stringify(cartItems));
  }, [cartItems]);

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

  return (
    <div>
      <nav className="p-4 bg-gray-100">
        <Link to="/" className="mr-4 text-blue-500 hover:underline">商品列表</Link>
        <Link to="/cart" className="text-blue-500 hover:underline">购物车 ({cartItems.length})</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Products addToCart={addToCart} />} />
        <Route path="/cart" element={<Cart cartItems={cartItems} />} />
      </Routes>
    </div>
  );
}

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

额外说明 #

• 确保路由跳转均通过<Link>或useNavigate钩子完成，不要用原生a标签或直接修改地址栏刷新页面。
• 若为服务端渲染的多页面应用（比如Express跳转），需将购物车数据存储到服务端会话（如session）或数据库，客户端状态无法跨页面共享。

内容的提问来源于stack exchange，提问作者Vikrant Chavan