title: Cancelling Axios request in React when using React Router Switch
body: <p>I'm a newbie building an App that utilizes React Router to switch between 3 different components that each utilize Axios to fetch data from an API. I am trying to cancel the API request whenever a navlink is clicked to prevent the &quot;Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function&quot; error in console. First I tried using AbortController in the App.js where the links are by adding click events that utilized controller.abort();. When that didn't work I tried directly where Axios was being called(seen in DisplayFish.js in my code sandbox example below) and still no luck. I have a simplified version of the main page with links and 1 of the components to show my code here <a href="https://codesandbox.io/s/white-voice-s8moo?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/white-voice-s8moo?file=/src/App.js</a>    Appreciate any help!</p>