从React应用程序中的Express API调用重定向

Question

我在React应用程序中定义了一个路由，该路由承载以下组件：

import { connect } from 'react-redux';
import _ from 'lodash';
import React, { PureComponent } from 'react';
import { actions as redirectActions } from '../../state/actions/redirect';
class MyRedirector extends PureComponent {
componentDidMount() {
const { redirect, match } = this.props;
redirect(match.params.someData);
}
render() {
return <div />;
}
}
MyRedirector = connect(state => ({}), { ...redirectActions })(
MyRedirector
);
export default MyRedirector;

我正在调用后端API，如下所示：

const redirect = someData => async dispatch => {
await axios
.get(
`${process.env.REACT_APP_API_URL}/api/someRoute/${someData}`,
{}
)
.then(data => {})
.catch(error => {
console.log('ERROR', error);
});

在这个托管在Node.js express服务器上的路由中，我运行以下代码：

res.setHeader('Access-Control-Allow-Origin', req.get('origin'));
res.redirect(
new URL(
`${req.get('origin')}/somePath/${
someObject.data
}/blabla?someQueryParam=${someData}`
)
);

所需流量如下：

1. 用户访问承载重定向组件的前端路由
2. Axios向后端发出请求
3. 后端通过重定向进行响应
4. 前端重定向用户以从后端重定向URL

我不知道如何使用上面的代码-在我的网络选项卡中，我看到了来自API调用的302重定向，我还看到了加载重定向URL的尝试，但由于CORS错误而失败-页面本身没有发生重定向。

我确信有更好的方法可以实现这一点。

Answer 1

如果您只需要在成功的api调用后路由用户，您可以使用来自react路由器dom 的历史道具

const redirect = someData => async dispatch => {
await axios
.get(
`${process.env.REACT_APP_API_URL}/api/someRoute/${someData}`,
{}
)
.then(data => {
//check for the success case here using if
this?.props?.history?.push(your desired url)
})
.catch(error => {
console.log('ERROR', error);
}); 

如果您得到任何未定义的历史/推送，则需要将组件封装在react路由器dom提供的HOC中。

import {withRouter} from 'react-router-dom'; 
export default withRouter(MyRedirector);