Connected-React-Route change still causes typeError to appear

Question

I am using connected-react-router history to navigate to the login screen when a users authentication times out. To do this I use axios interceptors to catch all responses and check to see if they're returning an error message that indicates the above. I am doing this as shown below:

    this.client.interceptors.response.use(response => response, error => {
      if(error.response.status === 401 && store && store.getState().user){
        store.dispatch(actions.resetUser())
        history.push('/login?authErr')
      }
      Promise.reject(error.response)
    })

The routing works just fine however, react still try's to render the component I navigated away from. Since the back-end responded with an error the data the component receives is null which causes the application to throw a Type Error and crash.

Since this can occur on any api call in the application after auth timeout is there a way I can suppress this render? or reset the application? Do I have to wrap all my api calls in a try, catch?

This is the bindings to connect to redux, you should also have a `react-router` dependency in your package.json — MisterJ, Jul 26 '19 at 13:05
You're right "react-router-dom": "^5.0.0", "@types/react-router-dom": "^4.3.1", — Haq.H, Jul 26 '19 at 13:06

score 0 · Answer 1 · answered Jul 26 '19 at 14:56

I figured it out. While I was editing my code I removed the return from in front of the promise.reject. So when the response was being returned as an error it wasn't being handled.

    this.client.interceptors.response.use(response => response, error => {
      if(error.response.status === 401 && store && store.getState().user){
        store.dispatch(actions.resetUser())
        history.push('/login?authErr')
      }
      return Promise.reject(error.response)
    })

Connected-React-Route change still causes typeError to appear

1 Answers1