如何从react发送url参数到express api调用

Question

因此，我正在从 React 向 Express 发出获取请求，并且 api url 需要参数，但我希望 url 的最后一位是动态的。我如何将参数从react发送到express中的api url？这是代码

反应

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

  useEffect(() => {
    async function fetchData() { 
        const response = await fetch("/web")
        const data = await response.json()
        console.log(data)
    }
    fetchData()
  }, [dynamic])

快递.js

app.get("/web", async (req, res) => {
    const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=")
      const data = await response.json()
      res.json(data)
})

基本上，我希望将动态状态值注入到 Express 中 URL 的末尾。

就像是

反应

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

    async function fetchData() { 
        const response = await fetch("/web" + dynamic)
        const data = await response.json()
        console.log(data)
      }

然后在Express中，当调用 API 时，URL 更改为

const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=somevalue")

我怎样才能实现这一目标？

Answer 1

您可以在路由处理程序端定义参数，设置与所需模式匹配的路由。例如：

app.get("/foo/bar/:myparam", async (req, res) => {
    //... here's your handler code
})

将在处理程序内匹配/foo/bar/baz, 和。req.params.myparam === "baz"

http://expressjs.com/en/guide/routing.html#route-parameters

使用查询参数类似，但您想要检查对象的值req.query，例如：

// client side (React code)
await fetch("/foo/bar?myparam=baz")
...
// In your express handler:
req.query.myparam === "baz"