Troubleshooting? Don't over ReactJS!
Tags: react, javascript, beginners, webdev
Published: 2019-06-08 03:59:51

---
title: Troubleshooting? Don't over ReactJS!
published: true
description: Fixing redirect issues withRouter() while using event.preventDefault() in a <Link/> 
tags: #react #javascript #beginner #webdev
---
For my capstone project at Flatiron School, I decided to build a scaled down version of *The Price is Right* in React. Simplifying the functionality of the game was essential to complete the project in three weeks. As with any game, logic dominated a majority of the page rendering, and I relied on `React Router` to dynamically navigate through my various pages. This did not cause any issues until I had a `fetch PATCH` request in an `onClick` within a Link. I had a button element wrapped by a Link so I could style it to my satisfaction. Within the button, I passed the `fetch` request function to the component in props. However, the function required `event.preventDefault()`.  Someone who is more familiar with `React Router` would have seen the issue with how I had setup my code. I, being a novice, could not understand why the link would not redirect. The `fetch PATCH` request would complete as would internal `console.log()`. The issue clearly was with the Link. 

After reading the `React Router` documents, I learned that the `event.preventDefault()` was preventing the Link from redirecting the user to the correct page.  In order to properly redirect and keep the function, I needed to access the session `history` prop for `React Router` to redirect the user to the correct route. I was unsure how to do this, but thankfully [StackOverflow](https://stackoverflow.com/questions/48294737/how-to-use-onclick-event-on-link-reactjs) and [this blog by Tyler McGinnis](https://tylermcginnis.com/react-router-programmatically-navigate/) helped direct the correct step to take. Seeing as the redirect was not being rendered by `React Router`, I had to wrap the component in `withRouter` to access `history.push`.
```export default withRouter(SpinningWheel )```
Once `history.push` was accessible, I created a callback function within the wrapped component to force the redirect to my desired page.  

```
goHome = () => {
   this.props.history.push('/')
}
```

So, I had the callback function written, but I needed to hook it up to the `fetch` request. Calling this callback function beforehand would be useless as the `fetch PATCH` updated the user’s score upon completion of the game. I only wanted to redirect the user once the score had been saved properly. The `fetch` function was on my main component page, and thus, I had to pass `goHome` as a parameter and add a callback function to the `fetch` request. For brevity, I referenced this as `cb` in my code.

In `withRouter(<Component>)`:
```
<Link to="/">
   <button className="Start-button"
      onClick={(ev) => saveMoney({ totalMoney }, ev, this.goHome)}>
      Go Home
   </button>
</Link>
```

In `App.js`:
```
saveMoney = (money, event, cb) => {
   event.preventDefault()
   
   cb & cb()
   
   let { gameId } = this.state
   let url = "http://localhost:3000/games/" + gameId

   let config = {
      headers:{
         'Content-Type': 'application/json'
       },
      method: 'PATCH',
      body: JSON.stringify({
         score: money.totalMoney
      }
   }

   fetch(url, config)
      .then(response => response.json())
      .then(data => {() => {
         this.getScores()
         cb & cb()
      })
}
```

Finally, I can now redirect the user without altering the code too much, and without causing a reload effect for the user, aka using React properly.

Truthfully, this was one of many challenges I had with my React game. My 3D spinning wheel turned out to be my toughest issue, unsurprisingly. Next week, I’ll be writing and sharing my code (and love!) for a vertical carousel. Stay tuned!

Learn more about [`withRouter` and other higher-order components (HOC)](https://reactjs.org/docs/higher-order-components.html)