Question

在以redux格式成功提交后，我想重定向到另一个页面。

我尝试了以下操作，但重定向失败或不执行任何操作

REACT-ROUTER-DOM：结果是错误'TypeError：无法读取未定义的属性'push'

import { withRouter } from "react-router-dom";

FacilityComplianceEditForm = withRouter(connect(mapStateToProps (FacilityComplianceEditForm));

export default reduxForm({
    form: "FacilityComplianceEditForm",
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    onSubmitSuccess: (result, dispatch, props) => { 
    props.history.push('/facilities') }
})(FacilityComplianceEditForm);

REACT-ROUTER-REDUX：成功提交，数据保存到数据库，但页面未重定向。

import { push } from "react-router-redux";

export default reduxForm({
    form: "FacilityComplianceEditForm",
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    onSubmitSuccess: (result, dispatch, props) => { dispatch(push('/facilities')) }
})(FacilityComplianceEditForm);

我还尝试了onSubmitSuccess: (result, dispatch, props) => dispatch(push('/facilities'))，但没有{}在调度语句周围，但是没有用

APP.JS显示路径确实存在

class App extends Component {
render() {
  return (
    <div>
      <Header />
        <div className="container-fluid">
         <Switch>
            <Route exact path="/facilities" render={() => <FacilitySearch {...this.props} />} />
          <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props} />} />
         <Route exact path="/facilities/compliance/:id" render={(props) => <FacilityComplianceEditForm id={props.match.params.id}{...this.props} />
        <Redirect from="/" exact to="/facilities" />
        <Redirect to="/not-found" />
      </Switch>
    </div>
    <Footer />
  </div>
  );
 }
}

export default App;

减速机：

export const complianceByIdReducer = (state = INTIAL_STATE.compId, action) => {
switch (action.type) {
console.log(state, action)
    case "CREATE_NEW_COMPLIANCE":
        return {
            ...state,
            compId: action.compCreate
        }
    default:
        return state
  }
}

操作：

export const createCompliance = (id, compObj) => {
  return dispatch => {
    axios.post("/api/facilities/compliance/" + id, compObj)
     .then(res => { return res.data })
     .then(compCreate => {
       dispatch(createComplianceSuccess(compCreate));
      alert("New compliance created successfully") //this does get triggered
  })
  }
}

const createComplianceSuccess = compCreate => {
  return {
    type: "CREATE_NEW_COMPLIANCE",
    compCreate: compCreate
  }
}

提交成功后返回的重定向对象

存储

import * as redux from "redux";
import thunk from "redux-thunk";
import {
  facilityListReducer,
  facilityReducer,
  facilityLocationReducer,
  facilityHistoricalNameReducer,
  facilityComplianceReducer,
  complianceByIdReducer
} from "../reducers/FacilityReducers";
import { projectFormsReducer } from "../reducers/FormsReducers";
import { errorReducer } from "../reducers/ErrorReducer";
import { reducer as formReducer } from "redux-form";

export const init = () => {
  const reducer = redux.combineReducers({
     facilityList: facilityListReducer,
    facility: facilityReducer,
    facilityLocation: facilityLocationReducer,
    historicalNames: facilityHistoricalNameReducer,
    facilityCompliance: facilityComplianceReducer,
    compId: complianceByIdReducer,
    countyList: projectFormsReducer,
    errors: errorReducer,
    form: formReducer
  });

  const store = redux.createStore(reducer, redux.applyMiddleware(thunk));
  return store;
};

Answer 1

react-router-redux已过时，因此我不想将其添加到我的项目中。我遵循了this post，并对路由的设置方式进行了一些修改，现在它可以正常工作了。

Redux-Form在onSubmit成功后无法重定向

1 个答案: