React Router V4 Redirect after form submission

ContactForm.js

import React, { Component } from 'react';

import { withRouter } from 'react-router-dom'; // <--- import `withRouter`. We will use this in the bottom of our file.

class ContactForm extends Component {

  submitForm (e) {
    e.preventDefault()
    this.props.history.push('/thank-you'); // <--- The page you want to redirect your user to.
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submitForm.bind(this)}>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default withRouter(ContactForm); // <--- make sure to wrap your component with `withRouter()`

It worked instantly. Thank you!

This is the fastest code solution i've gotten, i tried once and it worked once, no complexity at all... Thanks @elitan

worked!! thanks

Thanks alot, still very useful!

Worked immediately, thank you!

THANK YOU!!!!

Thank You so much. I was looking for this from 2 days and I finally found it today and it still works in 2019.

Thank you so much!!!

Thank you !!!!

Thank You Friend

Thank you!!!!

Thank you!

For functional component, it will be
props.history.push('/thank-you');

how to wrap the the contact form when you are using redux and wrapping connect already

@ArunTeltia, withRouter is a decorator and can be chained. I have a third one since I'm using redux forms. It ends up looking like this.

export default withRouter(connect(mapStateToProps, { createTrackAction })(
reduxForm({ form: "trackCreate", validate })(TrackCreate))
);

TrackCreate is my component class. Hope that helps.

@mark081 well thats something new to me i will try this Thank you for help

Hi , I have trying to navigate to other URL but it is not at all working for me. Please help me with this:
I want to navigate to /loginSuccess when email and password is correct.

import React, {useState} from "react";
import {NavLink, Redirect, withRouter} from 'react-router-dom';
import LoginSuccess from './LoginSuccess';

function Login(){
const [contact, setContact] = useState({
password : "",
email: ""
});

const [isLogin, setLogin] = useState(true);

  function handleChange(event) {
    const { name, value } = event.target;

    setContact(prevValue => {
      return {
        ...prevValue,
        [name]: value
      };
    });
  
  }
  function handleSubmit(){
    const getPwd = localStorage.getItem('pwd');
    const getEmail = localStorage.getItem('email');
    var em = document.getElementById("emailId").value;
    
    var pwd = '"'+document.getElementById("pwdId").value+'"';
    
    if (getEmail === em && getPwd === pwd) {
      setLogin(true);
      this.context.router.history.push('/loginSuccess');
    }
    else{
      setLogin(false);
      
    }

  }



  return (
    <div className="container">
    <h2>Signed Up Successfully!!</h2>
      <h1>
       Login
      </h1>
      
      <form onSubmit={handleSubmit}> 
        <input id="emailId" className="form-login"
          onChange={handleChange}
          name="email"
          value={contact.email}
          placeholder="Email"
        />
        <input id="pwdId" className="form-login" type="password"
          onChange={handleChange}
          name="password"
          value={contact.password}
          placeholder="Password"
        />
        {/* <button onClick={handleSubmit}>Login</button> */}
        <input type="submit" value="Login"></input>
      </form>
    </div>
  )    

}

export default withRouter(Login);

@tanyamehta
are you having a router define for the loginsuccess in the main app
if you dont have it may now work
just add a route in the main component for my case its app component

<Route path="/loginsuccess" component={abc123}/>

I also face the problem some time ago and this resolve the issue for me
Try this

Thanks a lot .You made my day

When I try to use this example I keep getting Invariant Violation: You should not use <Route> or withRouter() outside a <Router>.

Code:

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { graphql } from 'react-apollo';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';
import registerQuery from './RegisterQuery';
import s from './Register.css';

let postURL;

class Register extends React.Component {

  constructor() {
    super();
    this.state = {
      schoolName: '',
      userName: '',
      password: ''
    };
    this.onSchoolNameChange = this.onSchoolNameChange.bind(this);
    this.onUserNameChange = this.onUserNameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
  }

  componentDidMount() {
    postURL = `${global.location.origin}/graphql`;
  }

  onSchoolNameChange(event) {
    this.setState({ schoolName: event.target.value });
  }

  onUserNameChange(event) {
    this.setState({ userName: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit(data) {
    e.preventDefault();
    this.props.history.push('/login');
  }

  render() {
    console.log(this.props);
    const { schoolName, userName, password } = this.state;
    const isEnabled = schoolName.length > 0 && userName.length > 0 && password.length > 0;
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{this.props.title}</h1>
          <form onSubmit={this.handleSubmit.bind(this)}>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="schoolName">
                School Name:
                <input
                  className={s.input}
                  id="schoolName"
                  type="text"
                  name="schoolName"
                  value={this.state.schoolName}
                  onChange={this.onSchoolNameChange}
                  autoFocus // eslint-disable-line jsx-a11y/no-autofocus
                />
              </label>
            </div>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="userName">
                User Name:
                <input
                  className={s.input}
                  id="userName"
                  type="userName"
                  name="userName"
                  value={this.state.userName}
                  onChange={this.onUserNameChange}
                />
              </label>
            </div>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="password">
                Password:
                <input
                  className={s.input}
                  id="password"
                  type="password"
                  name="password"
                  value={this.state.password}
                  onChange={this.onPasswordChange}
                />
              </label>
            </div>
            <div className={s.formGroup}>
              <button disabled={!isEnabled} className={s.button} type="submit">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default graphql(registerQuery)(withStyles(s)(withRouter(Register)));

Did you resolve this issue?

Hi,
after you build a static folder with 'yarn build' or 'npm run build' on your terminal (inside your project folder),
you must make a file named '_redirects' inside 'build' folder.
then inside the '_redirects' folder, you write below:

/* /index.html 200

And go to Netlify and drag and drop your whole 'build' folder into the build site box.
It ran smoothly for me.

I hope this helps somebody.

OMG, thank you so much!

Thank you so much!

thank you. :)
I needed this :
this.props.history.push('/thank-you'); // <--- The page you want to redirect your user to.

When I try to use this example I keep getting Invariant Violation: You should not use <Route> or withRouter() outside a <Router>.

Code:

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { graphql } from 'react-apollo';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';
import registerQuery from './RegisterQuery';
import s from './Register.css';

let postURL;

class Register extends React.Component {

  constructor() {
    super();
    this.state = {
      schoolName: '',
      userName: '',
      password: ''
    };
    this.onSchoolNameChange = this.onSchoolNameChange.bind(this);
    this.onUserNameChange = this.onUserNameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
  }

  componentDidMount() {
    postURL = `${global.location.origin}/graphql`;
  }

  onSchoolNameChange(event) {
    this.setState({ schoolName: event.target.value });
  }

  onUserNameChange(event) {
    this.setState({ userName: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit(data) {
    e.preventDefault();
    this.props.history.push('/login');
  }

  render() {
    console.log(this.props);
    const { schoolName, userName, password } = this.state;
    const isEnabled = schoolName.length > 0 && userName.length > 0 && password.length > 0;
    return (
      <div className={s.root}>
        <div className={s.container}>
          <h1>{this.props.title}</h1>
          <form onSubmit={this.handleSubmit.bind(this)}>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="schoolName">
                School Name:
                <input
                  className={s.input}
                  id="schoolName"
                  type="text"
                  name="schoolName"
                  value={this.state.schoolName}
                  onChange={this.onSchoolNameChange}
                  autoFocus // eslint-disable-line jsx-a11y/no-autofocus
                />
              </label>
            </div>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="userName">
                User Name:
                <input
                  className={s.input}
                  id="userName"
                  type="userName"
                  name="userName"
                  value={this.state.userName}
                  onChange={this.onUserNameChange}
                />
              </label>
            </div>
            <div className={s.formGroup}>
              <label className={s.label} htmlFor="password">
                Password:
                <input
                  className={s.input}
                  id="password"
                  type="password"
                  name="password"
                  value={this.state.password}
                  onChange={this.onPasswordChange}
                />
              </label>
            </div>
            <div className={s.formGroup}>
              <button disabled={!isEnabled} className={s.button} type="submit">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default graphql(registerQuery)(withStyles(s)(withRouter(Register)));

the ANSWER: https://www.youtube.com/watch?v=QgpJHN_EOGM
< Route > your app in index.js if you are working in App.js

Its working..Thank you

It works! I love you!

It works! I love you!

❤️

Thanks a lot!

Thanks