React Table每行Show按钮跳转至订单详情页功能实现求助

核心逻辑是借助react-router-dom的路由传参能力，把当前行的订单ID通过路由传递给详情页，详情页拿到ID后请求对应订单数据渲染即可，总共分3步操作： #

步骤1：配置路由&新建详情页 #

首先在你的项目路由配置文件中新增订单详情页的动态路由，示例配置如下：

// 路由配置文件 比如App.js里的Route配置
import OrderDetail from './OrderDetail' // 你要新建的详情页组件

// react-router v5 写法
<Route path="/order/detail/:orderId" component={OrderDetail} />

// react-router v6 写法
<Route path="/order/detail/:orderId" element={<OrderDetail />} />

之后新建OrderDetail.js组件作为订单详情的承载页面。 #

步骤2：修改现有Pharmacy组件的跳转逻辑 #

两种实现方式可选，推荐第一种更简洁：

方式1：直接用Link组件替换按钮（无需写handleShow） #

你已经导入了Link组件，直接替换button即可，会自动处理跳转逻辑：

// columns数组里最后一个列配置修改为
{
  Header: '',
  Cell: ({row})=> (
    <div>
      {/* 把按钮换成Link，to属性拼接当前行的orderID */}
      <Link to={`/order/detail/${row.orderID}`} className="your-btn-class">
        Show Order
      </Link>
    </div>
  )
}

给Link设置和原按钮一致的样式即可，交互效果完全相同。

方式2：用handleShow编程式跳转 #

如果需要在跳转前执行额外逻辑（比如埋点、权限校验），可以用这种方式：

1. 改造handleShow并传递当前行的订单ID：

// 改成箭头函数避免this指向问题，或者在constructor里手动bind
handleShow = (orderId) => {
  // 类组件如果要调用history，需要先用withRouter包裹Pharmacy组件
  this.props.history.push(`/order/detail/${orderId}`)
}

// Cell里的点击事件传参
{
  Header: '',
  Cell: ({row})=> (
    <div>
      <button onClick={() => this.handleShow(row.orderID)}>Show Order</button> 
    </div>
  )
}

2. 导出Pharmacy组件时用withRouter包裹（react-router v5适用）：

// 顶部先导入withRouter
import { Link, withRouter } from "react-router-dom";

// 底部导出修改为
export default withRouter(Pharmacy)

如果是react-router v6环境，类组件建议直接用第一种Link方式，开发成本更低。 #

步骤3：详情页获取订单ID并请求数据 #

在OrderDetail组件中拿到路由里的orderID，请求后端接口获取对应订单详情渲染即可：

// react-router v5 类组件写法
class OrderDetail extends Component {
  state = {
    orderDetail: null,
    loading: true
  }
  componentDidMount() {
    // 拿到路由里的订单ID
    const orderId = this.props.match.params.orderId
    // 调用后端订单详情接口
    axios.get(`https://localhost:44357/api/Orders/${orderId}`)
      .then(res => {
        this.setState({orderDetail: res.data, loading: false})
      })
  }
  // 渲染详情UI的逻辑自行实现即可
}

// react-router v6 函数组件写法
import { useParams } from 'react-router-dom'
function OrderDetail() {
  const { orderId } = useParams()
  // 后续请求和渲染逻辑同上
}

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