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

Question

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"
        }
}

score 1 · Answer 1 · answered Feb 01 '22 at 00:15

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"); 
    }

score 1 · Accepted Answer · answered Feb 01 '22 at 00:31

1

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.

answered Feb 01 '22 at 00:31

k0uh0t

141
4

Oh, that was the version that showed up when I typed in `npm react --version`, when I checked my `package.json` file it shows `"react": 17.0.2`, so is that the version I should be talking about when I mention my react version? Does the code that you gave only work for the version of react I mistakingly told you before, or will it work for the newer version of react as well? – Soccerball123 Feb 01 '22 at 02:14
1

Yeah `17.0.2` is latest version now :) (ref: https://reactjs.org/versions/) I think it works both. – k0uh0t Feb 01 '22 at 05:39
I was also just wondering if there is any way I can pass the `this.state.data` object into the other page as well. I have 2 different files, `Product.js` and `Results.js`, and currently the `this.state.data` is in the `Product.js` file. How can I pass that data into the `Results.js` file that's located in the same folder (`./src/Website/Product`)? – Soccerball123 Feb 01 '22 at 15:53
Of course. If you use react-router, you can pass like `this.props.history.push('/results', { data: this.state.data })`. It depends on what library you use for page transitions. – k0uh0t Feb 02 '22 at 00:58
On my other page, do I access that data like `this.data...` or `data.something...` or `props.data...`? I'm using the `this.props.history.push`. – Soccerball123 Feb 02 '22 at 01:21
You can access like `this.props.location.state.data` in Result page. This answer might help you because it explains differences between class component and functional component, also new version. (https://stackoverflow.com/a/60809812/6861415) – k0uh0t Feb 02 '22 at 02:06

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

2 Answers2