React.js - 表单提交，将数据发布到后端并重定向页面

Question

I am working on my first React project.

I'd like to do 2 things when a form is submitted:

1. post form data to the backend
2. redirect to a thank-you page

I am able to post the form data to the backend with handleSubmit (code below), but looking for a way to incorporate redirect.

    handleSubmit = (event) => {
        event.preventDefault();
        try {
            await fetch('http://localhost:5000/results', {
                method: 'POST',
                headers:{
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(this.state)
                }).then(function(response){
                    console.log(response)
                    return response.json();
                });
            }
        catch (error){
            console.log(error);
        }
    }

This is how the handleSubmit is call on the form

<form onSubmit={this.handleSubmit} 
             action="http://localhost:5000/results" method="post"
             >

This is what I'd like to incorporate as part of handleSubmit

<Redirect  to="/thank-you/" />

Edit: withRouter/this.props.history.push

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


class Form extends React.Component {


handleSubmit = async event => {
        event.preventDefault();
        try {
            await fetch('http://localhost:5000/results', {
                method: 'POST',
                headers:{
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(this.state)
                }).then(function(response){
                    console.log(response)
                    return response.json();
                    this.props.history.push("/thankyou");
                });
            }
        catch (error){
            console.log(error);
        }
    }
}


export default withRouter(Form);

Edit 2: rewrite handleSubmit, add BrowserRouter to App

//form.component.jsx

class Form extends React.Component {
  
   handleSubmit = (event) => {
        event.preventDefault();
        
        fetch('http://localhost:5000/results', {
                method: 'POST',
                headers:{
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(this.state)
                }).then((response) => response.json())
                  .then((json) => {
                      console.log(json)
                     this.props.history.push("/thank-you");
                })
            
        .catch((error) =>  console.log(error.message));
    };

export default Form;



//app.js

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

class App extends React.Component {
 return (
  
        <BrowserRouter>

          <Route exact path='/form' component= {Form}/>
          <Route exact path='/thank-you' component={ThankYou}/>

        </BrowserRouter>
);
}
export default App;

Answer 1

You can't use Redirect component to programmatically redirect the user. Redirect component should be rendered in the JSX in order for it to take effect and redirect the app.

If you are using functional component, than you can use useHistory hook from react-router-dom to redirect the user after form submission.

import { useHistory } from 'react-router-dom';

function MyComponent() {
   ...
   const routerHistory = useHistory();  

   const handleSubmit = async event => {
        event.preventDefault();
        try {
            ...
            routerHistory.push('/new-route');
        }
        catch (error){
            console.log(error);
        }
    }

   ...
}

In case of class component, you can use history prop that is passed from the react router to the direct child components.

class MyComponent extends React.Component {
   ...

   handleSubmit = async event => {
        event.preventDefault();
        try {
            ...
            this.props.history.push('/new-route');
        }
        catch (error){
            console.log(error);
        }
    }

   ...
}

If history prop is not defined in your class component, then you can use withRouter higher-order component to ensure that router props are passed to your component.

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

class MyComponent extends React.Component {
   ...
}

export default withRouter(MyComponent);

---

Side note: Inside handleSubmit() method, you have mixed async-await syntax with promise-chaining . Use either one of them but not both at the same time. I suggest that you use async-await syntax.

Using just async-await syntax, handleSubmit() method could be written like as shown below:

handleSubmit = async event => {
    event.preventDefault();

    try {
      const requestData = {
        method: 'POST',
        headers:{
           'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state)
      };

      const response = await fetch('http://localhost:5000/results', requestData);
      const data = await response.json();

      // do something with the data returned from the server as 
      // a result of POSt request
      ...
      
      // redirect
      this.props.history.push('/thank-you');
    
     } catch (error) {
        console.log(error);
     }
}

Answer 2

You must return <Redirect to="/thank-you/" /> in function render to redirect. So, i suggest you should set a modal with component <Redirect to="/thank-you/" /> and render it in function render.

Example:

 state={
        modal: null,
    }

handleSubmit = async event => {
    event.preventDefault();
    try {
        await fetch('http://localhost:5000/results', {
            method: 'POST',
            headers:{
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state)
        }).then(function(response){
            console.log(response)
            this.setState({modal: <Redirect  to="/thank-you/" />})
            return response.json();
        });
    }
    catch (error){
        console.log(error);
    }
}

render() {
    return <div>
        ...
        {this.state.modal}
    </div>
}