title: How to get the React router path on route change
body: <p>I have this <code>App.jsx</code> that routes to (renders) different components.</p>
  <p>But I have set <code>&lt;NavigationBar /&gt;</code> and an <code>h1</code> tag between <code>Router</code> and <code>Switch</code> because I need to render those two components for every page.</p>
  <p>So now what I want is to get the current route name/path name that displays on the browser address bar. This path is changing when I click on different links (<code>Link</code>) to render different components.</p>
  <p>But the path value is the same <code>/</code> even though the path is changing for every <code>Link</code> click.
  I even used <code>componentDidUpdate</code> but it didn't work as it gave the error</p>
  <blockquote>
  <p>maximum update depth exceeded componentdidupdate</p>
  </blockquote>
  <p>this is my <code>App.jsx</code></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import &quot;./css/custom.css&quot;;
  
  import { BrowserRouter as Router, Switch, Route } from &quot;react-router-dom&quot;;
  
  import NavigationBar from &quot;./pages/homepage-components/1-navbar&quot;;
  import HomePage from &quot;./pages/HomePage&quot;;
  import Post from &quot;./pages/Post&quot;;
  
  class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        currentPath: &quot;&quot;,
      };
    }
  
  
    componentDidMount() {
      this.setState({
        currentPath: window.location.pathname,
      });
    }
  
    render() {
      return (
        &lt;Router&gt;
          {/* --------------- Navigation Bar --------------- */}
          &lt;NavigationBar /&gt;
          &lt;h1&gt;Path is: {this.state.currentPath}&lt;/h1&gt;
          {/* --------------- End of Navigation Bar --------------- */}
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={HomePage} /&gt;
            &lt;Route path=&quot;/post&quot; component={Post} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>Even though the different components are rendered as path changes, the value for <code>this.state.currentPath</code> doesn't update.</p>
  <p>Can someone help, please?</p>