Redirect to a different page on submit in react

Question

I am using react-router-dom for routing and redux-form for validation . I did validation for if form is pristine or is not matching the validation rules. the submit button is disabled . I need to make it so if the request is sent successfully. I redirect it to the '/' page.

Main component Page

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 action page

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

I don't understand the issue. Please tell us what you don't know to do. Maybe you are searching for withRouter() HOC that allows you to push to another link without using Link component. — Òscar Raya, Jan 04 '18 at 05:16
I need to redirect the 'posts/add' route to a different route ( '/home') after my forms submits successfully. I thought i wrote that in question and description alike. — Mayank Singh Fartiyal, Jan 04 '18 at 05:22
So what you need is to programmatically route onSubmit, check this answer https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Jan 04 '18 at 05:38

score 1 · Answer 1 · answered Jan 04 '18 at 14:39

If you need to redirect your app programmatically, then try to use history which you will pass to your react-router-dom.

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

Then you will have a function called push in your components props. You will use it like this:

this.props.push('/')

score 0 · Answer 2 · answered Jan 04 '18 at 15:43

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

A callback function that will be called when a submission succeeds.

Btw,onSubmit can return a promise, which if resolved will trigger onSubmitSuccess and if fails onSubmitFail

Redirect to a different page on submit in react

2 Answers2