javascript - How to send url params from react to express api call - Stack Overflow

admin管理员组

文章数量:1289543

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(";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(";Url=somevalue")

How can I go about achieving this?

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./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./api?Action=urlInfo&Url=somevalue")

How can I go about achieving this?

• javascript
• reactjs
• express

Share Improve this question Follow edited Sep 14, 2021 at 22:23 devAR asked Sep 14, 2021 at 22:11 devARdevAR 45822 gold badges1212 silver badges2525 bronze badges 1

• You can either use query parameters (like '/web/foo?key1=value1&key2=value2') or you can use url parameters (like '/web/foo/:param1/:param2'. In the case of url parameters, express does the work for you of matching your request urls to the appropriate handlers and extracting the url parameters as variables in the request.params object. In the case of query parameters, those end up in the url no matter what handler is matched and they end up in the request.query object. You can use that as a starting point to look further and see which of those methods makes sense for your use case. – nullromo Commented Sep 14, 2021 at 22:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./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"

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./api?Action=urlInfo&Url=${value}`)
      const data = response.json()
      res.json(data)
})

本文标签： javascriptHow to send url params from react to express api callStack Overflow