CODEWITHSUNDEEP
reactjsreact-router
SGolds
SGolds

Reputation: 139

Using this.props.history.push("/path") is re-rendering and then returning

Edited the question after further debugging

I am having a strange issue, tried for a while to figure it out but I can't.

I have a React Component called NewGoal.jsx, after a user submits their new goal I attempt to reroute them to my "goals" page. The problem: After they submit the browser loads in my goal page, but only for one second. It then continues and goes BACK to the NewGoal page!! I am trying to understand why this is happening, I am beginning to feel that this might be an async issue. Here is my code, currently it is using async-await, I also tried the same idea using a .then() but it also didn't work:

 async handleSubmit(event)
 {
   const response = await axios.post("http://localhost:8080/addGoal", 
    {
       goalID: null,
       duration: this.state.days,
       accomplishedDays: 0,
       isPublic: this.state.isPublic,
       description: this.state.name,
       dateCreated: new Date().toISOString().substring(0,10),

     }) */
   // push to route 
     this.props.history.push("/goals");   
  }

While debugging, I tried taking out the functionality where I post the new message, and just did a history.push, code is below - and this completely worked.

      // THIS WORKS
    async handleSubmit(event)
    {
         // push to route 
          this.props.history.push("/goals");    
    }

But as soon as I add anything else to the function, whether before the history.push or after, it stops working. Any advice would be very very appreciated! Thank you

Upvotes: 1

Views: 1229

Answers (1)

Kraig Walker
Kraig Walker

Reputation: 812

In the React Router doc's the developers talk about how the history object is mutable. Their recommendation is not to alter it directly.

https://reacttraining.com/react-router/web/api/history#history-history-is-mutable

Fortunately there are few ways to programmatically change the User's location while still working within the lifecycle events of React.

The easiest I've found is also the newest. React Router uses the React Context API to make the history object used by the router available to it's descendents. This will save you passing the history object down your component tree through props.

The only thing you need to do is make sure your AddNewGoalPage uses the history object from context instead of props.

handleSubmit(event)

    ...

    //successful, redirect to all goals
    if(res.data)
    {
      this.context.history.push("/goals")
    }

    ...
  })

}

I don't know if you're using a class component or a functional component for the AddNewGoalPage - but your handleSubmit method hints that it's a member of a Class, so the router's history object will be automatically available to you within your class through this.context.history.

If you are using a functional component, you'll need to make sure that the handleSubmit method is properly bound to the functional component otherwise the context the functional component parameter is given by React won't not be available to it.

Feel free to reply to me if this is the case.

Upvotes: 1

Related Questions