Redirect to URL after form submit in React

Question

I'm new to React and have written the following form which sends the data to Firebase, this part works but on submit I want to redirect to /thankyou.html which is outside of the react app.

Can anyone advise how I redirect after submit please?

My form is as follows:

import React, { Component } from 'react';
import firebase from '../firebase.js';
class Form extends Component {
  constructor(){
      super();
      this.state = {
          name : "",
          email : "",
          phone : "",
          message : "",
          formError: false
      }
  }

  getName = (e) =>{
    let username = e.target.value; 
    this.setState({
        name: username
    });
  }

  
  getPhone = (e) =>{
    let userphone = e.target.value; 
    this.setState({
        phone: userphone
    });
  }
  
  
  getEmail = (e) =>{
    let userEmail = e.target.value; 
    //the most important thing is that we use a RegEx
    //in order to manage the input of the email
    //at least we can get a some what valid email
    if(userEmail.match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/)){
      this.setState({
        email: userEmail
    });
      }else{
        this.setState({
          email: ""
      });
    }
  
  }

  
  getDescription = (e) =>{
    let userMessage = e.target.value; 
    this.setState({
        message: userMessage
    });
  }
  //send the form
  submitForm = (e) =>{
    e.preventDefault()
    const itemsRef = firebase.database().ref('items');
    if(this.state.name === "" || this.state.email === "" ||  this.state.phone === "" || this.state.message === "" ){
     this.setState({
        formError: true
     })
       return false;
    }else{
        this.setState({
            formError: false
         })
         const item = {
          Name: this.state.name,
          Email: this.state.email,
          Phone: this.state.phone,
          Message: this.state.message
         }
         itemsRef.push(item);
         this.setState({
           name: '',
           email: '',
           phone: '',
           message: ''
         })
    
    }
 
  }

  render() {

  

    return (
        <form onSubmit={this.handleSubmit}>
          {/* I am just sending a basic error message */}
              {this.state.formError &&
                <p className="error">
                    Fill all the input fields please.
                </p>
              }
              <div>
                <label htmlFor="name">Name</label>
                <input type="text" name="name" placeholder="Your name here please" onChange={this.getName} />
              </div>
              <div>
                <label htmlFor="email">Email</label>
                <input type="email" name="email" placeholder="We will contact you after reviewing your message" onChange={this.getEmail} />
              </div>
              
              <div>
                <label htmlFor="phone">Phone</label>
                <input type="phone" name="phone" placeholder="We will contact you after reviewing your message" onChange={this.getPhone} />
              </div>
              <div>
                <label htmlFor="name">Message</label>
                <textarea onChange={this.getDescription} maxLength="450"></textarea>

              </div>
              <div>
                <p>We will answer as soon as possible</p>
                <input type="submit" name="submit" value="Send" onClick= {this.submitForm} />
              </div>
              
            </form>
    );
  }
}

export default Form;

https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage — Nenad Vracar, Dec 13 '18 at 09:45
Redirect where exactly? Are you using React router? Or do you want to leave the react app altogether? — , Dec 13 '18 at 09:47
Possible duplicate of [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — , Dec 13 '18 at 09:55
All that React / firebase stuff is completely irrelevant to the question, btw. `this.setState` has a second parameter where you can pass a function that's called after the update. But that's not necessary anyway, since you're storing data in firebase. So you need to check firebase's `push()` docs for a success callback, then redirect in there. — , Dec 13 '18 at 09:56

score 4 · Accepted Answer · answered Dec 13 '18 at 10:23

in firebase push() can have a callback function as a second parameter which you can use in your case to check whenever the save process to firebase is done redirect to thank you page.

so after submitting the form and save to firebase, you can redirect to another page like that :

itemsRef.push(item, ()=>{
  window.location.href = "/thankyou.html"; // similar behavior as clicking on a link
});

score 3 · Answer 2 · answered Dec 13 '18 at 09:47

Use react-router-dom npm package.

import {withRouter, BrowserRouter } from 'react-router-dom';

Wrap your App.js component with BrowserRouter

<BrowserRouter><App /></BrowserRouter >

Now Wrap your component with withRouter where you have submit handler function.

export default withRouter(yourcomponentname);

submitForm = (e) =>{ 
  this.props.history.push('/url');
}

score 1 · Answer 3 · answered Dec 13 '18 at 10:16

1

Try this in your submitForm function after doing all stuff. hope it will help you.

document.location = "/thankyou.html" if the file is in root directory, and document.location = "thankyou.html" if the file is in relative directory.

answered Dec 13 '18 at 10:16

Sameer Reza Khan

474
4
15

score 1 · Answer 4 · answered Feb 05 '20 at 22:33

1

submitForm = (e) =>{ 
  this.props.history.push('/thankyou');
}

answered Feb 05 '20 at 22:33

Edwin O.

4,998
41
44

Redirect to URL after form submit in React

4 Answers4