React Router v4中如何从Action实现页面重定向？附现有代码

在React Router v4里实现从Action触发页面重定向，主要有几种常用的方式，我给你详细拆解下：

1. 直接利用history对象跳转 #

如果你的组件是路由直接渲染的（比如作为Route的component属性值），或者通过withRouter高阶组件包裹过，就能直接拿到history属性，在Action逻辑完成后调用history.push()就能实现重定向。

示例代码：

import React from 'react';
import { withRouter } from 'react-router-dom';

class ActionComponent extends React.Component {
  executeAction = () => {
    // 这里写你的Action业务逻辑
    console.log("执行Action完成");
    // 触发重定向
    this.props.history.push('/target-page');
  };

  render() {
    return (
      <button onClick={this.executeAction}>执行Action并重定向</button>
    );
  }
}

// 用withRouter包裹组件，注入history prop
export default withRouter(ActionComponent);

2. 结合Redux使用connected-react-router（如果用Redux管理状态） #

如果你的项目用Redux来管理状态和Action，推荐用connected-react-router来集成路由和Redux，这样就能在Redux Action里直接触发重定向。

第一步：配置Store和History #

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { connectRouter, routerMiddleware } from 'connected-react-router';
import { createBrowserHistory } from 'history';
// 导入你的其他reducers
import yourReducer from './reducers/yourReducer';

// 创建history对象
export const history = createBrowserHistory();

// 合并reducers，加入router reducer
const rootReducer = combineReducers({
  router: connectRouter(history),
  yourReducer: yourReducer
});

// 创建store，加入router中间件
const store = createStore(
  rootReducer,
  applyMiddleware(routerMiddleware(history))
);

export default store;

第二步：在Action中触发重定向 #

import { push } from 'connected-react-router';

// 定义你的Action创建函数
export const yourAsyncAction = () => dispatch => {
  // 执行你的异步Action逻辑，比如请求接口
  fetch('/api/some-data')
    .then(res => res.json())
    .then(data => {
      // 处理数据
      console.log(data);
      // 触发重定向
      dispatch(push('/success-page'));
    })
    .catch(err => {
      console.error(err);
      dispatch(push('/error-page'));
    });
};

3. 通过Redirect组件实现（适合组件内状态驱动的重定向） #

如果你的Action执行后会改变组件的状态，可以在组件的render方法里根据状态判断是否返回Redirect组件来完成重定向。

示例代码：

import React from 'react';
import { Redirect } from 'react-router-dom';

class ActionRedirectComponent extends React.Component {
  state = {
    isActionDone: false
  };

  handleAction = () => {
    // 执行Action逻辑
    setTimeout(() => {
      this.setState({ isActionDone: true });
    }, 1000);
  };

  render() {
    // 如果Action执行完成，就重定向
    if (this.state.isActionDone) {
      return <Redirect to="/completed-page" />;
    }

    return (
      <div>
        <p>等待Action执行...</p>
        <button onClick={this.handleAction}>执行Action</button>
      </div>
    );
  }
}

export default ActionRedirectComponent;

内容的提问来源于stack exchange，提问作者Ashy Ashcsi