时间戳

首页 > 解决方案 > 反应应用代理不工作时包含url参数

reactjs - 反应应用代理不工作时包含url参数

问题描述

我有一个创建反应应用程序通过代理与快速服务器交谈当我从大多数组件发布时，代理工作但如果该组件是通过包含 url 参数的路由呈现的，则请求 url 将更改为不存在的东西并产生结果在 404

我的快速服务器端点（侦听端口 5000）

registrationRouter.post('/api/create-account' function (req, res) {

        return res.status(200);

});

这样就可以成功卷曲了

这是从具有方法的反应组件形式调用的

    handleSubmit = (e) => {
        e.preventDefault();
        const { hash } = this.props.match.params;
     axios.post( api/create-account, {hash:hash});
    };

路线包含；

<Switch>
        <Route exact path='/' component={Home}/>
     {/*<Route path='/create-account/:hash' component={CreateAccountForm}/>*/} 
request is sent to create-account/api/create-account resulting in 404
        <Route path='/create-account' component={CreateAccountForm}/> 
request is sent to /api/create-account )resulting in 200
        <Route path='/' component={Home}/>
</Switch>

代理在 package.json 中定义为

  "proxy": "http://localhost:5000",

在添加代理之前，这一切正常（当然将帖子网址硬编码为 localhost:5000/api/create-account）

自从我介绍代理后，这才开始发生。

我究竟做错了什么？谢谢

标签： reactjsreact-router

解决方案

只是我自己想通了。

答案在这里

如何使用 React Router 修复来自 React.js 的子路径的错误代理重定向？.

我需要在我的帖子请求中添加前导斜杠

 handleSubmit = (e) => {
        e.preventDefault();
        const { hash } = this.props.match.params;
     axios.post( api/create-account, {hash:hash});
    };

推荐阅读