Is there a way to redirect a user once data is received from the backend in react?-CodePudding

I'm trying to pass in a transcript from the frontend (which the user gives by talking into a mic), and then that data will go to the backend which will return a JSON object back to the frontend. How do I make it so that my website redirects the user to a loading screen while that process (data from the frontend to backend to frontend) is taking place, and then ultimately once that process is done, it will redirect it from that loading screen to a "results page" that will display that data?

I'm using react version 6.14.13. Does anyone know anything I could do?

These functions in my "main page" is what is going to handle this:

class Product extends Component {
         constructor() {
           super()
           this.state = {
             // Backend API data
             data: {"data": {}}
           }

        }
        handleSending() {
                const options = {
                      method: "POST",
                      headers: {
                        'Content-Type': 'application/json;charset=utf-8', 
                      },
                      body: JSON.stringify(this.state.text)
                };
                fetch("http://127.0.0.1:5000/", options)
                        .then(response=> response.json())
                        .then(json => this.setState({data: json}))
                        .then(this.handleRedirect())
        }
        
        handleRedirect() {
          // REDIRECT USER TO LOADING PAGE
    
          // ONCE PROCESS IS DONE, REDIRECT USER TO "RESULTS PAGE"
        }
}

CodePudding user response：

This is common way to show loading page.

And to redirect "result page", I recommend that you use routing library like React Router(https://reactrouter.com/).

class Product extends Component {
  constructor() {
    super()
    this.state = {
      // Backend API data
      data: {"data": {}},
      loading: false
    }

    handleSending() {
      const options = {
        method: "POST",
        headers: {
          'Content-Type': 'application/json;charset=utf-8', 
        },
        body: JSON.stringify(this.state.text)
      };
      // Set loading true
      this.setState({loading: true});
      fetch("http://127.0.0.1:5000/", options)
        .then(response=> response.json())
        .then(json => this.setState({data: json}))
        .then(this.handleRedirect())
        .finally(()=> {
          // Set loading false
          this.setState({loading: false});
        });
      }
        
      handleRedirect() {
        // REDIRECT USER TO LOADING PAGE
    
        // ONCE PROCESS IS DONE, REDIRECT USER TO "RESULTS PAGE"
        // router.push("result_page");
      }

      render() {
        return (
          {this.state.loading && <div>loading...</div>
          {!this.state.loading && <div>your product page</div>}
        )
      }
}

I wonder why you use such old react version anyway.

CodePudding user response：

First import withRouter from "react-router-dom"

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

Then you should wrap your component with withRouter when exporting as default.

    export default withRouter(Product);

And then you will have access to history coming from props which you can use its push method to push the user to desired page.

    handleRedirect() { 
        this.props.history.push("/results-page"); 
    }