title: How to get the current path in ReactJS
body: <p>I need to get the current path of the url <strong>on route change</strong> and based on the value I want to do <strong>conditional rendering</strong></p>
  <p>So here's my code and I don't have the idea to go forward.</p>
  <pre><code>import React, { useRef, useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import &quot;./css/custom.css&quot;;
  
  import {
    BrowserRouter as Router,
    Switch,
    Route,
    useLocation,
  } 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;;
  
  function NavigationHeader() {
    const location = useLocation();
    return location.pathname;
  }
  
  function App() {
    const [location, setLocation] = useState(&quot;&quot;);
  
    const mounted = useRef();
    useEffect(() =&gt; {
      if (!mounted.current) {
        // do componentDidMount logic
        let val = NavigationHeader; // this part return the function, even tried NavigationHeader(), but no luck
        alert(val);
        mounted.current = true;
      } else {
        // do componentDidUpdate logic
      }
    });
  
    return (
      &lt;Router&gt;
        {/* --------------- Navigation Bar --------------- */}
        {location === &quot;/&quot; ? &lt;NavigationBar /&gt; : null}
        
  
        {/* --------------- End of Navigation Bar --------------- */}
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={() =&gt; &lt;HomePage isroot={location} /&gt;} /&gt;
          &lt;Route path=&quot;/post&quot; component={Post} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>So what I need to do is:</p>
  <p><strong>For every <code>Route</code> change I need to update the value for <code>location</code> and do the conditional rendering and pass that value (path) to the <code>Homepage</code> component too as a <code>prop</code></strong></p>
  <p>Any idea, anyone?</p>