点击添加按钮触发页面刷新，useParams获取id为undefined问题求助

API 探路者

2026-6-18

问题：React中点击Add Item按钮后useParams获取的id变为undefined

在React项目的产品页中，有一个「Add Item」按钮，点击该按钮时需要将通过useParams钩子从URL参数中获取的商品id更新到items数组状态变量中。

目前遇到的问题：从首页导航至产品页时，URL参数（商品id）能被正确获取并打印；但点击「Add Item」按钮后，页面会立即重新渲染，此时useParams钩子获取到的URL参数变为undefined，进而导致items数组中存入了undefined值。

相关代码

AddToCart组件代码

import { useParams, Link } from "react-router-dom";
import { useState } from 'react';

function AddToCart() {
  const [items, setItems] = useState([]);
  const { id } = useParams();
  console.log(id);

  function addItem() {
    setItems([...items, id]);
  }

  console.log(items);

  return ( 
    <div className='add-to-cart'>
      <button className='add-btn' onClick={() => addItem()}>Add Item</button>
      {/* <Link to={`cart/${items}`}><FontAwesomeIcon className='cart-btn' icon={faBasketShopping} size='3x' /></Link> */}
    </div>
  );
}

export default AddToCart;

页面路由配置代码

function App() {
  return (
    <div className="App">
      <Header/>
      <MenuTitle/>
        <Routes>
          <Route path='/' element={<Home/>}/>
          <Route path='/item_page/:id' element={<Item/>}/>
          {/* <Route path='/cart/:id' element={<Cart/>}/> */}
        </Routes>
      <AddToCart/>
    </div>
  );
}

export default App;