title: How to get location pathname with React Router v5 and Hooks in React v16.13.1?
body: <p>I have some issue with React Router <code>useLocation</code> and how to get the current pathname.</p>
  <p>Here is what I'm doing :</p>
  <pre><code>    import {BrowserRouter as Router, Switch, Route, Link} from &quot;react-router-dom&quot;;
      import {useHistory, useLocation} from 'react-router-dom'
          
      function Home(props) {
          const [isHome, setIsHome] = useState(true);
          const [isContents, setIsContents] = useState(false);
          const [isUserProfile, setIsUserProfile] = useState(false);
          let location = useLocation();
          let history = useHistory();
      
          console.log(location)
          console.log(history)
      
          function getCurrentLocation() {
      
          }
      
          function logout() {
              const logger = fetch('/users/logout');
              logger.then(logout =&gt; {
                  if (logout.ok) {
                      props.logout()
                  } else {
                      console.log('error', logout);
                  }
              })
          }
   
      
          return (
              &lt;Router&gt;
                  &lt;div className={'container-fluid h-100'}&gt;
                      &lt;div className={'row'}&gt;
                          &lt;ul className={&quot;nav nav-tabs&quot;}&gt;
                              &lt;li className={&quot;nav-item&quot;}&gt;
                                  &lt;Link to={'/home'}&gt;1&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className={&quot;nav-item&quot;}&gt;
                                  &lt;Link to={'/contents'}&gt;2&lt;/Link&gt;
                              &lt;/li&gt;
                              &lt;li className={&quot;nav-item&quot;}&gt;
                                  &lt;Link to={'/user'}&gt;3&lt;/Link&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path={'/home'}&gt;1&lt;/Route&gt;
                          &lt;Route path={'/contents'}&gt;2&lt;/Route&gt;
                          &lt;Route path={'/user'}&gt;3&lt;/Route&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          )
      };
      
      export default Home
  </code></pre>
  <p>I want to get the currentLocationPathName in order to apply some custom style.
  When I make a <code>console.log(location)</code> this is what I get back:</p>
  <pre><code>function useLocation() {
   if (true) {
      !(typeof useContext === &quot;function&quot;) ?  true ? Object(tiny_invariant__WEBPACK_IMPORTED_MODULE_6__[&quot;default&quot;])(false, &quot;You must use React &gt;= 16.8 in order to use useLocation()&quot;) : undefined : void 0;
    }
  
    return useContext(context).location;
  }
  </code></pre>
  <p>Here a screenshot for more informations:</p>
  <p><a href="https://i.stack.imgur.com/C585Y.png" rel="nofollow noreferrer">error message</a></p>
  <p>I want to better understand how to use these Hooks.</p>
  <p>Thank you for your time.</p>
  <p>Edit:</p>
  <p>Thank you to @Dance2die for his answer and specially this recommendation:</p>
  <blockquote>
  <p>And also make sure Home is used under a tree of a router (e.g.) BrowserRouter) (child, grandchild, etc)</p>
  </blockquote>
  <p>I did not put <code>Home</code> under <code>&lt;Router&gt;&lt;/Router&gt;</code> tree...</p>
  <p>Now it's working good and I can get access to the <code>location.pathname</code>.</p>