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

Question

我正在使用 React 路由器制作一个多页应用程序，并且我正在将 Node 用于后端。Node 正在端口 3000 上工作，React 在端口 3001 上工作。我已经在前端的包.json中设置了一个代理（React）。我的 API 可以在本地主机上访问：3000/api/ 所以我从前端（端口：3001）获取或发布公理看起来像这样：

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://localhost: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

我正在使用next.config。js来处理我的API服务器代理。我也面临同样的错误。因为我的API路由类似于http://172.17.19.79:8000/api/job/所以我更改了下一个配置。js到下面的代码：

module.exports = {
    async rewrites() {
        return [{
            source: '/api/:path*',
            destination: 'http://localhost:8000/api/:path*/'
        }]
    }
}

Answer 2

使用必须有这样的路径。

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

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

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

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