ReactJS/Django项目中点击按钮跳转至对应详情页的实现方法

嘿，作为刚入门Web开发的新手，你已经完成了API和基础组件的开发，这已经很棒啦！咱们一步步来搞定点击跳转详情页的逻辑，核心就是路由配置、跳转触发、详情页取数这三步：

首先确保你已经安装了react-router-dom（如果没装，先跑npm install react-router-dom），然后在你的路由入口文件（比如App.js或者专门的routes.js）里配置列表页和带参数的详情页路由：

// src/App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserList from './components/UserList'; // 你的用户列表组件
import PersonnelContentFeed from './components/PersonnelContentFeed'; // 你的个人详情组件

function App() {
  return (
    <Router>
      <Routes>
        {/* 用户列表页的路由 */}
        <Route path="/users" element={<UserList />} />
        {/* 动态路由：:id 是占位符，用来捕获URL里的用户ID */}
        <Route path="/users/:id" element={<PersonnelContentFeed />} />
      </Routes>
    </Router>
  );
}

export default App;

这里的:id是关键——它会匹配URL里/users/后面的任意字符串（比如/users/1、/users/5），并把这个值作为路由参数传递给详情页组件。

在你的UserList组件中，给每个用户对应的按钮（或者用户卡片）加上点击事件，用useNavigate钩子实现编程式跳转：

// src/components/UserList.js
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';

function UserList() {
  const navigate = useNavigate();
  const [users, setUsers] = useState([]);

  // 先通过API获取用户列表（假设你已经有这部分逻辑，这里补个示例）
  useEffect(() => {
    const fetchUsers = async () => {
      const res = await fetch('/api/account/view_user/');
      const data = await res.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  // 点击按钮时跳转到对应用户的详情页
  const handleGoToDetail = (userId) => {
    navigate(`/users/${userId}`);
  };

  return (
    <div className="user-list">
      <h2>所有用户</h2>
      {users.map(user => (
        <div key={user.id} className="user-item">
          <span>{user.username}</span>
          {/* 绑定点击事件，传入当前用户的ID */}
          <button onClick={() => handleGoToDetail(user.id)}>查看详情</button>
        </div>
      ))}
    </div>
  );
}

export default UserList;

这里的useNavigate是React Router v6提供的钩子，调用它并传入目标路径，就能实现页面跳转。我们把用户ID拼到路径里，这样路由就能识别并传递给详情页。

接下来在PersonnelContentFeed组件里，用useParams钩子获取URL里的用户ID，然后调用你的Django API获取该用户的详情：

// src/components/PersonnelContentFeed.js
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function PersonnelContentFeed() {
  // 从路由参数中取出用户ID
  const { id } = useParams();
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchUserDetail = async () => {
      try {
        // 调用你的Django API，传入获取到的用户ID
        const res = await fetch(`/api/account/view_user/${id}`);
        if (!res.ok) {
          throw new Error('获取用户详情失败');
        }
        const userData = await res.json();
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUserDetail();
  }, [id]); // 当id变化时，重新请求数据（比如从用户1跳转到用户2）

  // 处理加载、错误、空数据状态
  if (loading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;
  if (!user) return <div>未找到该用户</div>;

  // 渲染用户详情
  return (
    <div className="user-detail">
      <h1>{user.username}的个人主页</h1>
      <p>用户ID：{user.id}</p>
      <p>邮箱：{user.email}</p>
      {/* 这里渲染更多用户属性，比如头像、简介等 */}
    </div>
  );
}

export default PersonnelContentFeed;

useParams会返回一个对象，里面包含我们在路由里定义的id参数，拿到这个ID后就可以请求对应的API接口了。

• 跨域问题：如果你的React前端（比如localhost:3000）和Django后端（比如localhost:8000）端口不同，记得在Django里配置CORS，推荐用django-cors-headers库，不然前端请求会被浏览器拦截。
• API路径：如果你的API是绝对路径（比如http://localhost:8000/api/...），可以直接写在fetch里；也可以在React的package.json里加"proxy": "http://localhost:8000"，这样就能用相对路径请求了。
• 路由路径自定义：你可以把/users/:id改成你喜欢的路径，比如/profile/:id，只要列表页的跳转路径和路由配置保持一致就行。

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