React组件间传递表格点击参数实现动态路由与接口请求方案咨询

架构老林

2026-10-4

实现步骤

1. 修复Teams.jsx中Link的跳转路径语法

你当前的Link代码用了单引号包裹模板字符串，会导致参数无法正确注入，需要替换为反引号：

const columns = [
  { 
    field:"name", 
    headerName:"Name", 
    renderCell: (params) => <Link to={`/team/${params.value}/components`}>{params.value}</Link>
  },
  // 其余列配置
]

注意路径开头加斜杠，避免相对路径跳转异常

2. App.js中配置动态路由规则

根据你用的React Router版本对应配置：

React Router v6 配置示例

import { Routes, Route } from 'react-router-dom'
import Teams from './Teams'
import Component from './Component'

function App() {
  return (
    <Routes>
      <Route path="/teams" element={<Teams />} />
      {/* 用:name定义动态路径参数 */}
      <Route path="/team/:name/components" element={<Component />} />
    </Routes>
  )
}

React Router v5 配置示例

import { Switch, Route } from 'react-router-dom'
import Teams from './Teams'
import Component from './Component'

function App() {
  return (
    <Switch>
      <Route path="/teams" component={Teams} />
      <Route path="/team/:name/components" component={Component} />
    </Switch>
  )
}

3. Component.jsx中获取参数并发起请求

同样对应React Router版本处理：

React Router v6 写法

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

function Component() {
  // 取出路由中的name参数
  const { name } = useParams()
  const [components, setComponents] = useState([])

  useEffect(() => {
    if(!name) return
    // 动态拼接请求地址
    fetch(`www.blablabla.com/teams/${encodeURIComponent(name)}/components`)
      .then(res => res.json())
      .then(data => setComponents(data))
  }, [name])

  // 其余表格渲染逻辑
}

这里用encodeURIComponent处理参数，避免团队名带特殊字符导致请求路径异常