How to send url params from react to express api call-CodePudding

So i'm making a fetch request from react to express and the api url requires params but I want the last bit of the url to be dynamic. How would I send a param from react to the api url in express? Heres the code

react

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

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

express.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)
})

Basically, I would like the dynamic state value to be injected into the end of the URL in express.

Something like

react

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

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

Then in express when the API is called the URL changes to

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

How can I go about achieving this?

CodePudding user response：

You define the parameter on the route handler side, setting up a route that matches the desired pattern. For example:

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

Will match /foo/bar/baz, and req.params.myparam === "baz" inside the handler.

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

Using query params is similar, but you want to check the values of the req.query object instead, like:

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

CodePudding user response：

Use Dynamic value in params of api call.

React code would look like this:

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

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

In Express.Js code define the parameter on the route handler side, and use that in fetch api call

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