Redirect and refresh page on form submission in React frontend

JavaScript
1

I have a form which when submitted creates a new entry in my MongoDB Database.

Upon doing this though, I want this new entry to display on my ‘redirect’ page. However - instead of ‘refreshing’ the page, it simply redirects, and the page appears the same as it did when it was last navigated away from.

So my question is, how do I re-factor my code so that on form submission the redirect also refreshes the redirect page?

Here’s my submit code:

  onSubmit = (e) => {

    e.preventDefault();

    axios.post("/api/submitDebt", {
      creditCard: this.state.creditCardToggled,
      personalLoan: this.state.personalLoanToggled,
      provider: this.state.provider,
      balance: this.state.balance,
      limit: this.state.limit,
      monthly: this.state.monthly,
      interest: this.state.interest,
      borrowed: this.state.borrowed
    })

    this.props.history.push('/dashboard');
  }

I’m assuming it’s because it’s ‘this.props.history’, so it returns the original page. What’s the best way for me to refactor this redirect to also reload the page on form submit?

Any help would be appreciated. Thanks!

2

dashboard (I guess that is what you mean with the ‘redirect page’) needs to update its source data in order to display the updated state.
You need either to fetch it from the back-end when your page loads (trigger an event after submitDept has finished updating data), or push new data to the state without making another network request.
Your life will probably be easier with the first solution.