如何在 URL 中使用路由参数执行 axios get 请求？

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 端点发生了变化。我首先对此 URL 进行服务器请求：/api/form/:userId/:title 然后，我真正想做的是上面的动作创建者在我的客户端有一个 axios get 请求，如下所示：

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

此处的控制台日志显然没有return标题字符串，它returns :title

是否可以做我想做的事？如果没有，还有什么建议吗？

Answer 1

好的，我找到了这个问题的答案:)

解决办法就在react-router。在此之前，我对 react-router 还不够熟悉。

诀窍是在你的路由路径中定义你的参数，无论它在哪里（你的商店，或者你定义所有路由的文件），如下所示：

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

然后您可以通过像这样的道具在您的表单组件中访问这些参数：

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

为了让你的action creator可以使用上面的props，你可以将它们作为你在组件中触发的action creator的参数，如下：

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

如何在 URL 中使用路由参数执行 axios get 请求？

How to perform an axios get request with route parameters in the URL?

redux

react-redux

axios