React中如何使用NavLink在页面间传参，配合Django REST Framework查询指定项目数据

你可以通过react-router-dom的动态路由参数实现参数传递，这种方式刷新页面后参数也不会丢失，完全匹配你的需求。 #

步骤1：修改Main.js新增带参数的路由 #

在路由配置中新增一条带projectCode动态参数的路由，用于匹配单个项目的工单页：

import { Switch, Route } from 'react-router-dom';
import Projects from './Projects';
import Tickets from './Tickets';

const Main = () => (
    <Switch>
      <Route exact path='/projects' component={Projects}></Route>
      {/* 新增带参数的路由 */}
      <Route exact path='/projects/:projectCode/tickets' component={Tickets}></Route>
      <Route exact path='/tickets' component={Tickets}></Route>
    </Switch>
  );

export default Main;

步骤2：修改Projects.js把项目编码转为可点击链接 #

先导入Link组件，再把原本的纯文本p标签改为跳转链接，把项目编码带入路由：

import React, { useState, useEffect} from 'react'
// 新增导入Link
import { Link } from 'react-router-dom'

function Projects() {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('http://localhost:8000/api/projects/')
      .then(res => res.json())
      .then(setData)
      .catch(console.error);
  }, []);

  if (data) {
    const projects = [...new Set(data.map(item => item.project_code))];

    return (
        <div>
          <h3>These are the current projects</h3>
            {projects.map(item => (
              // 修改为带参数的跳转链接，记得加key属性避免react警告
              <p key={item}>
                <Link to={`/projects/${item}/tickets`}>{item}</Link>
              </p>
            ))}
        </div>
    );
  }
  return null;
}

export default Projects;

步骤3：修改Tickets组件获取参数并请求对应接口 #

通过useParams钩子拿到路由中的项目编码，发起请求时携带该参数：

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

function Tickets() {
  // 获取路由中的项目编码参数
  const { projectCode } = useParams()
  const [tickets, setTickets] = useState(null)

  useEffect(() => {
    let apiUrl = 'http://localhost:8000/api/tickets/'
    // 如果存在项目编码，请求对应项目的工单接口
    if (projectCode) {
      apiUrl += `?project_code=${projectCode}`
    }
    fetch(apiUrl)
      .then(res => res.json())
      .then(setTickets)
      .catch(console.error)
  }, [projectCode])

  // 剩下的渲染逻辑和你原本的逻辑一致即可
  return <div>{/* 渲染工单列表 */}</div>
}

export default Tickets

后端适配说明 #

你需要在Django DRF的工单视图中开启project_code字段的查询过滤，推荐使用django-filter实现，配置后即可自动识别url中的project_code查询参数返回对应数据。

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