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

Question

我正在使用 React Router 制作一个多页应用程序，我正在使用 Node 作为后端。Node 在 3000 端口上工作，在 3001 端口上进行 React。我在前端（React）的 package.json 中设置了一个代理。我的 API 可以在 localhost:3000/api/ 上访问，所以我从前端（端口：3001）使用 axios 获取或发布如下所示：

axios.post('api/login/',{data........})

它从 /item 或 /example http://localhost:3001/xxxxxx/ 之类的父路径完美运行 ......我可以在端口 3000 上访问我的 /api/login。

但是从像http://localhost:3001/another/ex/或http://localhost:3001/xxxxxx/example/这样的子路径...我在控制台中看到 get 或 post 请求被发送到http://本地主机：3001/xxxxxx/example/api/login 在这些情况下，代理无法正确重定向。

我找到了避免子路径的解决方案，但我想知道到底发生了什么以及解决方案是什么？

在此先感谢您的帮助！

<Router history={history}>
<NavBar history={history} refresh={this.state.refresh}/> 
<Switch>
<Route exact path="/" render={(props) => <MainPage history= 
{history} />}/>

<Route exact path="/item" history={history} component= 
{ComponentX1} />

<Route exact path="/example" history={history} component= 
{ComponentX2} />

<Route exact path='/another/ex' history={history} component= 
{ComponentY1}/>

<Route exact path='/xxxxxx/example' history={history} component=    
{ComponentY2}/>

</Switch>
<Footer/>
</Router>

我想了解正在发生的事情。

Answer 1

使用必须具有这样的路径。

axios.post("/api/login", { ...data }) // Included '/' at the beginning

另外，检查package.json中的代理是否如此

...
proxy: 'http://localhost:3000' // not '/' at end.
...

如果您有任何疑问，请在评论中ping我。