当 <Route> 包含 url 参数时，React 应用代理不起作用答案

【问题标题】：React app proxy not working when <Route> contains url parameter当 <Route> 包含 url 参数时，React 应用代理不起作用
【发布时间】：2019-11-06 20:52:41
【问题描述】：

我有一个创建反应应用程序通过代理与快速服务器通信当我从大多数组件发布时代理工作，但如果该组件通过包含 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）

自从我引入代理后，这才开始发生。

我做错了什么？谢谢

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

这是我自己想出来的。

答案就在这里

How to fix wrong proxy redirection from sub path from React.js using React Router?.

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

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

【讨论】：