如何在BrowserRouter路径中插值数组索引？React投资组合路由跳转问题

你的核心问题是点击卡片时，路由里的投资组合ID无法正确获取——当前代码中goToPortfolioClick函数里使用portfolios.id，但portfolios是一个数组，数组本身没有id属性，自然无法得到对应卡片的ID。

有两种直接可行的修复方式：

方式一：给点击事件传入当前投资组合ID #

修改点击事件函数，让它接收当前卡片对应的投资组合ID，再进行路由跳转：

const goToPortfolioClick = (portfolioId) => {
  navigate(`/current-portfolio/${portfolioId}/`);
}

const mappedPortfolioNames = portfolios.map(p => (
  <StyledCard 
    key={p.id}
    id={p.id}
    onClick={() => goToPortfolioClick(p.id)}>  
    Portfolio: {p.id} <br/>
    {p.portfolio_name}
  </StyledCard>
))

方式二：使用React Router的Link组件（更推荐） #

既然是路由跳转场景，直接用Link组件替代手动navigate调用更符合React Router的设计规范，代码更简洁且无需维护点击事件：

// 保留其他导入，修改mappedPortfolioNames部分
const mappedPortfolioNames = portfolios.map(p => (
  <Link key={p.id} to={`/current-portfolio/${p.id}/`} style={{ textDecoration: 'none', color: 'inherit' }}>
    <StyledCard id={p.id}>  
      Portfolio: {p.id} <br/>
      {p.portfolio_name}
    </StyledCard>
  </Link>
))

注：添加style是为了消除Link默认的文本样式，避免影响你的StyledCard样式，可根据实际情况调整。

后端是Rails多对多关系的话，只要前端路由传的ID正确，后端就能通过这个ID关联到对应的股票列表，所以重点就是确保路由中的ID是当前点击的投资组合的真实ID。

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