React Router 场景下如何将选中商品ID传递到单商品详情页

你当前使用的是React Router v5版本的写法，按下面的步骤修改即可拿到商品id参数： #

第一步：调整路由配置（可选，用hook的话可以跳过这步） #

如果是通过组件props拿参数，需要先把路由自带的props透传给Product组件：

function App() {
  return (
      <BrowserRouter>
        <NavBar />
        <Route exact path='/' render={(props) => <Main {...props} />}/>
        {/* 把路由props透传给Product组件 */}
        <Route exact path='/products/:productId' render={(props) => <Product {...props} />}/>
      </BrowserRouter>
  );
}

第二步：在Product组件中获取参数，两种方式二选一即可 #

方式1：通过props获取（类组件、函数组件都适用） #

直接从组件props的match属性里取路由参数：

function Product(props) {
  // 这里拿到的productId就是你跳转时传的p.idProducts值
  const productId = props.match.params.productId
  // 后续可以用这个id请求商品详情接口
  return <div>当前商品ID：{productId}</div>
}

方式2：用useParams Hook（仅函数组件适用，写法更简洁，不需要透传props） #

import { useParams } from 'react-router-dom'

function Product() {
  // 直接解构出路由里定义的productId参数
  const { productId } = useParams()
  return <div>当前商品ID：{productId}</div>
}

额外优化建议 #

你当前Main组件里用原生a标签跳转，会触发整页刷新，建议换成React Router自带的Link组件，体验更流畅：

1. 先引入Link组件

import { Link } from 'react-router-dom'

2. 替换原来的a标签即可

// 把<a href={ref}>替换为下面的写法
return <Link to={ref}>
    <div className="product">
        <b>{p.name}</b><br/><i>${p.value}</i>
    </div>
</Link>

内容的提问来源于stack exchange，提问作者Víctor Donat