React中实现点击跳转时将id值传递至详情页面的方案求助

第一步：修改index.js中的跳转逻辑，把ID携带到URL里 #

首先咱们得让跳转的URL带上对应的ID，这样details页面能直接从URL里读取到这个值。如果你的项目用的是React Router（大部分React单页应用都会用它），推荐用Link组件做单页跳转，比原生a标签更流畅：

1. 先导入Link组件：

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

2. 替换原来的a标签，把to属性设置为带ID的路径：

render() {
  const { id, heading, body, status, user} = this.props;
  const { det } = this.state;
  // 注意：你原来代码里的console.log(val)中val未定义，记得要么补充定义要么删除哦
  return (
    <Link to={`/details/${id}`} style={{ color: 'green' }}>
      <div className="member" style={this.style}>
        <h1>{id}</h1>
        <h3>Reported by: {user}</h3>
        <h3>{heading}</h3>
        <h5>{body}</h5>
        <h5>The current status is: {status}</h5>
      </div>
    </Link>
  )
}

如果非要用原生a标签，也可以把href改成/details/${id}，不过这种方式会触发页面刷新，单页应用不推荐：

<a href={`/details/${id}`} style={{ color: 'green' }} onClick={(e) => {
  e.preventDefault();
  this.sendValue();
  window.location.href = `/details/${id}`;
}}>

第二步：在details.js中获取ID并追加到其他URL #

接下来在details页面拿到这个ID，就能把它加到你需要的任意URL上了，分两种组件类型说明：

情况1：details.js是函数组件（React Router v6+）

用useParams钩子读取URL参数：

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

function Details() {
  const { id } = useParams(); // 这里的id要和路由配置里的参数名一致

  // 示例：把ID追加到API请求或其他页面URL上
  const apiRequestUrl = `https://your-api-domain.com/data/${id}`;
  const relatedPageUrl = `/related-content/${id}`;

  // 后续就可以用这些拼接好的URL做请求或跳转了
  return (
    <div>
      <h2>详情页 ID: {id}</h2>
      {/* 其他页面内容 */}
    </div>
  )
}

情况2：details.js是类组件（React Router v5）

通过this.props.match.params获取参数：

class Details extends React.Component {
  render() {
    const { id } = this.props.match.params;

    // 拼接URL示例
    const apiRequestUrl = `https://your-api-domain.com/data/${id}`;

    return (
      <div>
        <h2>详情页 ID: {id}</h2>
      </div>
    )
  }
}

补充：路由配置要对应 #

别忘了在你的路由配置文件里，把details的路由改成带参数的形式：

如果是React Router v6：

import { Routes, Route } from 'react-router-dom';
import Details from './details';

// 路由配置片段
<Routes>
  {/* 其他路由 */}
  <Route path="/details/:id" element={<Details />} />
</Routes>

如果是React Router v5：

import { Switch, Route } from 'react-router-dom';
import Details from './details';

// 路由配置片段
<Switch>
  {/* 其他路由 */}
  <Route path="/details/:id" component={Details} />
</Switch>

这样整个流程就通了：点击index里的组件跳转到带ID的details页面，然后在details里拿到ID，就能随意追加到其他URL上啦！

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