React如何传递gameId至Scores组件并实现按ID路由跳转

1. 在NHL组件中绑定点击事件并跳转路由 #

给NHL组件里可点击的元素加点击事件，通过路由导航把gameId带到目标页面（以React Router v6为例）：

// NHL.jsx
import { useNavigate } from 'react-router-dom';

const NHL = ({ gameId }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    // 跳转到带gameId的路由
    navigate(`/nhl/${gameId}`);
  };

  return (
    <div onClick={handleClick} style={{ cursor: 'pointer' }}>
      {/* 你的NHL组件内容 */}
    </div>
  );
};

export default NHL;

如果是类组件，用withRouter高阶组件配合history.push：

// NHL.jsx（类组件）
import { withRouter } from 'react-router-dom';

class NHL extends React.Component {
  handleClick = () => {
    const { gameId, history } = this.props;
    history.push(`/nhl/${gameId}`);
  };

  render() {
    return (
      <div onClick={this.handleClick} style={{ cursor: 'pointer' }}>
        {/* 你的NHL组件内容 */}
      </div>
    );
  }
}

export default withRouter(NHL);

2. 配置路由规则 #

在路由配置文件里添加/nhl/:gameId的路由，指向Scores组件：

// App.jsx 或路由配置文件
import { Routes, Route } from 'react-router-dom';
import Scores from './Scores';
import NHL from './NHL';

function App() {
  return (
    <Routes>
      {/* 其他路由 */}
      <Route path="/nhl/:gameId" element={<Scores />} />
    </Routes>
  );
}

3. 在Scores组件中获取gameId并调用API #

用React Router的useParams钩子拿到URL里的gameId，然后发起API请求并渲染数据：

// Scores.jsx
import { useParams, useEffect, useState } from 'react';

const Scores = () => {
  const { gameId } = useParams();
  const [gameData, setGameData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchGameInfo = async () => {
      try {
        setLoading(true);
        // 替换成你的实际API地址
        const res = await fetch(`https://your-api-url.com/nhl/${gameId}`);
        if (!res.ok) throw new Error('数据请求失败');
        const data = await res.json();
        setGameData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    if (gameId) fetchGameInfo();
  }, [gameId]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error}</div>;
  if (!gameData) return <div>暂无数据</div>;

  return (
    <div>
      <h2>赛事ID：{gameId}</h2>
      {/* 渲染API返回的具体数据，示例如下 */}
      <p>赛事名称：{gameData.title}</p>
      <p>比分：{gameData.score}</p>
    </div>
  );
};

export default Scores;

核心说明 #

• 组件间传递gameId靠路由参数实现，不用额外手动传props，直接通过URL携带参数完成跨组件通信。
• 注意React Router版本匹配：v6用useNavigate和useParams，v5及之前用useHistory和useParams（或props.match.params）。

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