{"id":12397,"date":"2025-05-27T05:29:27","date_gmt":"2025-05-27T05:29:27","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12397"},"modified":"2025-05-27T05:38:16","modified_gmt":"2025-05-27T05:38:16","slug":"react-router-v6-navigate-with-axios-interceptors","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/react-router-v6-navigate-with-axios-interceptors","title":{"rendered":"React Router v6 How to Use `navigate`: Axios Interceptors"},"content":{"rendered":"<p>We can use useNavigate from React Router v6 inside Axios interceptors by creating a custom hook or using a wrapper function. Since React hooks like useNavigate can only be used inside components or hooks, we need a workaround to access it inside an Axios interceptor. By creating a <strong>Navigation Helper<\/strong>, we can store the navigate function and use it inside Axios interceptors efficiently.<\/p>\n<h2>Using a Navigation Helper<\/h2>\n<p>We can create a separate module to manage navigation outside of React components.<\/p>\n<h3>1: Create a Navigation Helper<\/h3>\n<p>Create a file (navigateHelper.js) to store the navigate function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">\r\n\/\/ navigateHelper.js\r\nlet navigateFunction;\r\nexport const setNavigate = (navigate) =&gt; {\r\n    navigateFunction = navigate;\r\n};\r\nexport const navigateTo = (path) =&gt; {\r\n    if (navigateFunction) {\r\n        navigateFunction(path);\r\n    }\r\n};\r\n<\/pre>\n<h3>2: Modify Axios Interceptor<\/h3>\n<p>Use this helper in our Axios interceptor:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">\r\nimport axios from \"axios\";\r\nimport { navigateTo } from \".\/navigateHelper\";\r\nexport const HTTP = axios.create({\r\n    baseURL: \"http:\/\/URL.ru\/\",\r\n    headers: {\r\n        \"content-type\": \"application\/json\",\r\n    },\r\n});\r\nHTTP.interceptors.response.use(\r\n    response => response,\r\n    error => {\r\n        if (error.response?.status === 401) {\r\n            navigateTo(\"\/login\");\r\n        }\r\n        return Promise.reject(error);\r\n    }\r\n);\r\n<\/pre>\n<h3>3: Initialize Navigation in App Component<\/h3>\n<p>Set up the navigate function inside our App.js:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">\r\nimport { BrowserRouter as Router, Routes, Route, useNavigate } from \"react-router-dom\";\r\nimport { setNavigate } from \".\/navigateHelper\";\r\nimport Home from \".\/Home\";\r\nimport Login from \".\/Login\";\r\nconst AppWrapper = () => {\r\n    const navigate = useNavigate();\r\n    setNavigate(navigate); \/\/ Set navigate function globally\r\n\r\n    return (\r\n        <Routes>\r\n            <Route path=\"\/\" element={<Home \/>} \/>\r\n            <Route path=\"\/login\" element={<Login \/>} \/>\r\n        <\/Routes>\r\n    );\r\n};\r\nconst App = () => (\r\n    <Router>\r\n        <AppWrapper \/>\r\n    <\/Router>\r\n);\r\nexport default App;\r\n<\/pre>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/react-carousel\" target=\"_blank\">React Carousel Component<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We can use useNavigate from React Router v6 inside Axios interceptors by creating a custom hook or using a wrapper function. Since React hooks like useNavigate can only be used inside components or hooks, we need a workaround to access it inside an Axios interceptor. By creating a Navigation Helper, we can store the navigate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12397"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12397"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12397\/revisions"}],"predecessor-version":[{"id":12401,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12397\/revisions\/12401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12398"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}