MERN栈中页面间项目数据传递的技术方案咨询

这是React项目中实现页面间动态数据传递最常规、高效的方式，无需全局状态或静态页面，具体实现步骤如下：

1. 配置带动态参数的路由 #

在路由配置文件（如App.js或routes.js）中，添加包含项目ID参数的路由，指向工单展示页面：

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        {/* :projectId 为动态路由参数，用于接收项目ID */}
        <Route path="/project/:projectId/tickets" element={<ProjectTickets />} />
      </Routes>
    </Router>
  );
}

2. 仪表盘页面添加跳转逻辑 #

在仪表盘的map()循环中，通过Link组件或useNavigate钩子生成带项目ID的跳转路径：

方式一：用Link组件实现跳转 #

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

function Dashboard() {
  const projects = [/* 从数据库获取的项目数组 */];

  return (
    <div>
      {projects.map(project => (
        <div key={project._id}>
          <h3>{project.name}</h3>
          <Link to={`/project/${project._id}/tickets`}>打开项目</Link>
        </div>
      ))}
    </div>
  );
}

方式二：用按钮触发跳转（useNavigate钩子） #

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

function Dashboard() {
  const navigate = useNavigate();
  const projects = [/* 从数据库获取的项目数组 */];

  const openProject = (projectId) => {
    navigate(`/project/${projectId}/tickets`);
  };

  return (
    <div>
      {projects.map(project => (
        <div key={project._id}>
          <h3>{project.name}</h3>
          <button onClick={() => openProject(project._id)}>打开项目</button>
        </div>
      ))}
    </div>
  );
}

3. 工单页面获取ID并请求数据 #

在ProjectTickets页面中，通过useParams钩子提取路由中的项目ID，再根据ID请求对应工单：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function ProjectTickets() {
  const { projectId } = useParams();
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    // 调用后端API，根据projectId获取对应工单
    const fetchTickets = async () => {
      try {
        const res = await fetch(`/api/tickets?projectId=${projectId}`);
        const data = await res.json();
        setTickets(data);
      } catch (err) {
        console.error('获取工单失败:', err);
      }
    };

    fetchTickets();
  }, [projectId]);

  return (
    <div>
      <h2>项目{projectId}的工单列表</h2>
      {tickets.map(ticket => (
        <div key={ticket._id} className="ticket-item">
          <h4>{ticket.title}</h4>
          <p>{ticket.description}</p>
        </div>
      ))}
    </div>
  );
}

4. 后端API处理 #

在Express后端中，添加接收projectId参数的工单查询接口：

const Ticket = require('../models/Ticket');

app.get('/api/tickets', async (req, res) => {
  try {
    const { projectId } = req.query;
    const tickets = await Ticket.find({ project: projectId });
    res.json(tickets);
  } catch (err) {
    res.status(500).json({ message: '查询工单失败' });
  }
});

• React Context方案：属于过度设计，全局状态适合共享跨组件的通用数据（如用户登录状态），单个页面跳转传递ID用路由参数更直接，不存在所谓安全隐患，但完全没必要这么做。
• 为每个项目创建单独页面：不可行，项目是数据库中的动态数据，无法提前为每个项目写死页面，动态路由参数正是用来解决这类动态内容场景的。

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