在提交时重定向到不同的页面答案

【问题标题】：Redirect to a different page on submit in react在提交时重定向到不同的页面
【发布时间】：2018-01-04 05:11:13
【问题描述】：

我使用 react-router-dom 进行路由，使用 redux-form 进行验证。我对表单是否原始或不匹配验证规则进行了验证。提交按钮被禁用。如果请求发送成功，我需要这样做。我将它重定向到“/”页面。

主要组件页面

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {Link, Redirect} from 'react-router-dom';

import {createPost} from '../actions/index';

//Validation rules here

const renderField = ({input,label,type,className,meta: {touched,error,}}) => (<div className="form-group">
  <label>{label}</label>
  <input {...input} placeholder={label} type={type} className={className}/> {touched && ((error && <span>{error}</span>))}
</div>);

class PostsNew extends Component {

  render() {
    const {handleSubmit, pristine, submitting} = this.props;

    return (<form onSubmit={handleSubmit}>
      <h3>Create a New Post</h3>
      <Field component={renderField} label="Title" type="text" name="title" validate={[required, title]} className="form-control"/>
      <Field component={renderField} label="Category" type="text" name="categories" validate={[required, nan, category]} className="form-control"/>
      <Field component={renderField} label="Content" name="content" validate={[required, textarea]} className="form-control"/>
      <button type="submit" disabled={pristine | submitting} className="btn btn-primary">
        Submit</button>
      <Link to="/" className="btn btn-danger">Cancel</Link>
    </form>);
  }
}

export default reduxForm({
  form: 'PostsNewForm',
  onSubmit: createPost
}, null)(PostsNew);

Redux 操作页面

export function createPost(props) {
  const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, props);
  return {type: CREATE_POST, payload: request};
}

【问题讨论】：

我不明白这个问题。请告诉我们您不知道该怎么做。也许您正在搜索 withRouter() HOC，它允许您在不使用 Link 组件的情况下推送到另一个链接。
我的表单提交成功后，我需要将“posts/add”路由重定向到不同的路由（“/home”）。我以为我是在问题和描述中写的。
所以你需要以编程方式路由 onSubmit，检查这个答案stackoverflow.com/questions/44127739/…

标签： reactjs redux-form react-router-dom

【解决方案1】：

如果您需要以编程方式重定向您的应用，请尝试使用您将传递给您的 react-router-dom 的 history。

<ConnectedRouter history={history}>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/topics" component={Topics}/>
  </div>
</ConnectedRouter>

然后，您将在组件道具中拥有一个名为 push 的函数。你会这样使用它：

this.props.push('/')

【讨论】：

【解决方案2】：

onSubmitSuccess: (result, dispatch, props) => {
   return props.dispatch(routerActions.push(uri));
}

提交成功时调用的回调函数。

顺便说一句，onSubmit 可以返回一个承诺，如果解决将触发onSubmitSuccess，如果失败则触发onSubmitFail

【讨论】：