如何執行axios通過URL中的路由參數獲取請求？

Question

所以，我有一個動作創建者，我想從我的API端點獲取數據。

以下工作：

export function getData(){ 
    return function(dispatch){ 
     axios.get('/api/form/myuser/mytitle').then((res) => { 
      console.log(res.data); 
      return dispatch(retrieve(res.data)) 
     }) 
     .catch((err) => { 
      console.log(err) 
     }) 
    } 
} 

在我的情況，但是，該API端點的變化。 我首先做一個服務器請求這個網址：/api/form/:userId/:title 那麼，其實我想要做的就是上述行動的創建者與愛可信的GET請求作爲對我的客戶端如下：這裏顯然

axios.get('/api/form/:userId/:title') 

控制檯登錄不返回標題字符串，它返回:title

是否有可能做我想做的事情？如果沒有，任何建議如何？

Answer 1

好吧，我找到了答案:)

解決方案在於react-router。在此之前我對反應路由器不夠熟悉。

關鍵是在你的路線路徑定義參數，可以無論它是（你的店，或者你定義的所有路由文件），內容如下：

<Route path = "form/:userId/:formtitle" component = {Form} /> 

然後，您可以訪問這些PARAMS像這樣通過道具您的表單組件：

this.props.params.userId 
this.props.params.formtitle 

爲了有可用上面的道具到你的動作的創造者，你可以把它們作爲你在你的組件觸發行動的創建者的參數如下：

this.props.getData (this.props.params.userId, this.props.params.formtitle) 

更多細節在這裏：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes

Answer 2

我覺得模板字符串可以爲你的問題的一個舒適的解決方案。請不要猶豫，使用Alt Gr + 7！ :)

axios.get(`/api/form/${userId}/${title}`) 

小心使用未定義的值。

https://developer.mozilla.org/hu/docs/Web/JavaScript/Reference/Template_literals