{"id":12099,"date":"2025-04-15T10:27:25","date_gmt":"2025-04-15T10:27:25","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12099"},"modified":"2025-04-15T10:27:25","modified_gmt":"2025-04-15T10:27:25","slug":"react-route-v4-changes","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/react-route-v4-changes","title":{"rendered":"React Router v4 On Change"},"content":{"rendered":"<p>When working with <strong>React Router v4<\/strong>, we may want to detect route changes for analytics, logging, or other side effects. However, BrowserRouter does not expose the history object directly. To listen for route changes in this way, we need to use the Router component instead of BrowserRouter and provide it with the history object you created.<\/p>\n<p>Here\u2019s the corrected code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Router, Route, Link } from 'react-router-dom';\r\nimport { createBrowserHistory } from 'history';\r\n\r\nconst history = createBrowserHistory();\r\n\r\nhistory.listen((location, action) =&gt; {\r\n  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);\r\n  console.log(`The last navigation action was ${action}`);\r\n});\r\n\r\nconst A = () =&gt; &lt;div&gt;A &lt;Link to=\"\/b\"&gt;b&lt;\/Link&gt;&lt;\/div&gt;;\r\nconst B = () =&gt; &lt;div&gt;B &lt;Link to=\"\/a\"&gt;a&lt;\/Link&gt;&lt;\/div&gt;;\r\n\r\nReactDOM.render(\r\n  &lt;Router history={history}&gt;\r\n    &lt;div&gt;\r\n      &lt;div&gt;Hello!&lt;\/div&gt;\r\n      &lt;Route path=\"\/a\" component={A} \/&gt;\r\n      &lt;Route path=\"\/b\" component={B} \/&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/Router&gt;,\r\n  document.getElementById('root')\r\n);\r\n<\/pre>\n<p>By replacing BrowserRouter with Router and passing the custom history object as a prop, we ensure that the history.listen callback correctly detects and logs route changes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with React Router v4, we may want to detect route changes for analytics, logging, or other side effects. However, BrowserRouter does not expose the history object directly. To listen for route changes in this way, we need to use the Router component instead of BrowserRouter and provide it with the history object you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12100,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12099","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\/12099"}],"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=12099"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12099\/revisions"}],"predecessor-version":[{"id":12101,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12099\/revisions\/12101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12100"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}