React开发问题：实现表格行点击跳转至详情页展示描述详情

你的核心问题在于当前实现是在表格组件内部渲染详情，而非通过路由跳转到独立页面并传递数据。同时使用了原生<a>标签导致页面刷新，无法保留路由状态。以下是针对性的修改方案：

1. 重构Comment组件：实现带确认的路由跳转 #

替换原生<a>标签为react-router-dom的路由能力，通过history手动跳转并传递数据，同时保留确认弹窗逻辑：

import React from "react";
import { withRouter } from "react-router-dom";

class Comment extends React.Component {
  handleRowClick = (e) => {
    e.preventDefault();
    const confirmView = window.confirm("Are you sure you want to view the details?");
    if (confirmView) {
      // 通过路由state传递当前条目的描述数据
      this.props.history.push({
        pathname: "/issues/details",
        state: { description: this.props.description }
      });
    }
  };

  render() {
    return (
      <tr style={{ cursor: "pointer" }} onClick={this.handleRowClick}>
        <td>{this.props.description}</td>
        <td>{this.props.severity}</td>
        <td>{this.props.children}</td>
      </tr>
    );
  }
}

// 用withRouter包裹组件，注入history路由对象
export default withRouter(Comment);

2. 修改IssuesDetails组件：接收并展示路由传递的数据 #

如果是函数组件，使用useLocation获取路由状态：

import React from "react";
import { useLocation } from "react-router-dom";

export default function IssuesDetails() {
  const location = useLocation();
  // 从路由state中取出描述数据，做空值保护
  const description = location.state?.description || "No details available";

  return (
    <div className="issue-details">
      <h2>Issue Description</h2>
      <p>{description}</p>
    </div>
  );
}

如果是类组件，同样用withRouter包裹后通过props.location获取：

import React from "react";
import { withRouter } from "react-router-dom";

class IssuesDetails extends React.Component {
  render() {
    const description = this.props.location.state?.description || "No details available";
    return (
      <div className="issue-details">
        <h2>Issue Description</h2>
        <p>{description}</p>
      </div>
    );
  }
}

export default withRouter(IssuesDetails);

3. 补充说明：基于ID的更优传参方案 #

如果你的数据有唯一ID（而非直接传递描述文本），可以改用URL参数传递，更符合RESTful规范：

Comment组件跳转逻辑修改： #

this.props.history.push(`/issues/details/${this.props.issueId}`);

路由配置（假设在App.js或路由配置文件中）： #

import { Route } from "react-router-dom";
import IssuesDetails from "./IssuesDetails";

// 添加详情页路由
<Route path="/issues/details/:issueId" component={IssuesDetails} />

IssuesDetails组件获取ID并匹配数据： #

// 函数组件示例
import { useParams } from "react-router-dom";

function IssuesDetails() {
  const { issueId } = useParams();
  // 这里可以根据ID从数据源（API/全局状态）获取对应数据
  const issue = yourDataSource.find(item => item.id === issueId);

  return (
    <div className="issue-details">
      <h2>Issue #{issueId}</h2>
      <p>{issue?.description || "No details available"}</p>
    </div>
  );
}

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