当前位置：首页 > React

react如何点击跳转详情页

2026-01-25 23:48:25React

路由配置

使用 react-router-dom 库配置路由，确保详情页有独立的路由路径。在项目入口文件或路由配置文件中定义路由规则：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import DetailPage from './DetailPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/detail/:id" element={<DetailPage />} />
      </Routes>
    </Router>
  );
}

组件跳转逻辑

在列表项或按钮的点击事件中，通过 useNavigate 钩子实现编程式导航。传递参数（如ID）到详情页：

react如何点击跳转详情页

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

function ItemList() {
  const navigate = useNavigate();

  const handleClick = (id) => {
    navigate(`/detail/${id}`);
  };

  return (
    <button onClick={() => handleClick(item.id)}>查看详情</button>
  );
}

详情页参数获取

在详情页组件中通过 useParams 钩子提取路由参数，用于数据加载或展示：

react如何点击跳转详情页

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

function DetailPage() {
  const { id } = useParams();
  // 根据id获取数据逻辑...
  return <div>详情页ID: {id}</div>;
}

动态数据加载

结合 useEffect 和异步请求，在详情页根据ID获取数据：

import { useEffect, useState } from 'react';

function DetailPage() {
  const [data, setData] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    fetch(`/api/items/${id}`)
      .then(res => res.json())
      .then(setData);
  }, [id]);

  return data && <div>{data.content}</div>;
}

样式与交互优化

为点击元素添加悬停效果或加载状态，提升用户体验：

<button 
  onClick={() => handleClick(item.id)}
  style={{ cursor: 'pointer', transition: 'all 0.3s' }}
  className="hover:scale-105"
>
  {isLoading ? '加载中...' : '查看详情'}
</button>