以前まで、axios 内部でのリダイレクト処理には location.href を使用していたのですが、react-router を使って書けないか？と思い修正することに。
で、調べたところ、下記の記事が参考になりました。
reactjs – How to redirect in axios? – Stack Overflow
https://stackoverflow.com/questions/51588360/how-to-redirect-in-axios
今回私が使用したのは、history ライブラリの createBrowserHistory です。
まず、リダイレクト処理を実行したいプロジェクトに下記を追加します。
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
で、あとはリダイレクトを行いたいタイミングで下記を実行するだけです！
history.replace('[リダイレクト先]');
こちらを実行したところ、確かに URL はリダイレクト先のものに変わりました。
が、しかし、ページの内容はリダイレクトされる前のページのまま、変わりませんでした…。
他にも、react-router の browserHistory を利用するという方法もありましたが、こちらを使うには、react-router のバージョンが 3である必要があり、バージョンを下げてしまうと他の場所の処理が動かなくなるという状況に陥ってしまうため、こちらは却下でした。
また、同じく react-router の useHistory を使うことも考えたのですが、私の環境では Invalid hook call というエラーが発生して使用できませんでした。
…で、最終的に、無理に react-router を使わなくても良いのでは！？という結論に至りました！
まだ時間的に余裕があるので、もう少し対応してみますが、どうしてもだめなら location.href を使う方法に戻したいと思います。
以上、axios の中でリダイレクト処理を実行する方法についてでした。
特に問題がなければ、変にこだわらず location.href を使いましょう！
ご参考になれば幸いです。
