如何将React中的动态参数传递到Express API请求的URL中

AI 小北

2026-10-3

实现步骤

你只需要分别调整React端请求路径和Express端路由匹配规则即可，具体修改如下：

1. React端代码修改

拼接请求路径时建议补充路径分隔符/，同时对动态参数做编码处理，避免参数含特殊字符时路由匹配失败：

const [dynamic, setDynamic] = useState("somevalue")

useEffect(() => {
  async function fetchData() { 
      // 对动态参数编码后拼接在请求路径后
      const response = await fetch(`/web/${encodeURIComponent(dynamic)}`)
      const data = await response.json()
      console.log(data)
  }
  fetchData()
}, [dynamic])

2. Express端代码修改

首先给路由配置动态参数占位符，接收前端传过来的动态值，再拼接至第三方接口的请求参数中：

// :dynamicParam 为动态参数占位符，可通过req.params获取对应值
app.get("/web/:dynamicParam", async (req, res) => {
    try {
      // 拿到前端传的动态值，解码后拼接至第三方请求地址
      const targetUrl = decodeURIComponent(req.params.dynamicParam)
      const response = await fetch(`https://alexa.com/api?Action=urlInfo&Url=${encodeURIComponent(targetUrl)}`)
      const data = await response.json()
      res.json(data)
    } catch (err) {
      // 增加错误处理，避免接口无响应
      res.status(500).json({error: '请求失败'})
    }
})

注意事项