title: React Routing: How to make selected nav item as Active?
body: <p>I'm trying to make/show selected nav item as active.I check regarding questions but i cant find whats wrong in my code.</p>
  
  <p>I know by using <strong><em>NavLink</em></strong> ,we can make by default active when select the Nav-Item.</p>
  
  <p>But now, i'm trying with <strong><em>Link</em></strong> , showing some pathname error.</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'pathname' of undefined</p>
  </blockquote>
  
  <p>Please help me to know , what's wrong in my code.</p>
  
  <p>Or <strong>Is there any alternatives to show the active nav Item?</strong> </p>
  
  <p>I tried the following code: </p>
  
  <pre><code>import React from "react";
  import { IndexRoute, Link } from "react-router-dom";
  
  class SideNav extends React.Component {
    render() {
      const { match, location, history } = this.props;
      return (
        &lt;div className="sidebar-wrapper"&gt;
          &lt;div className="sidebar-container"&gt;
            &lt;ul className="sidebar-menu"&gt;
              &lt;li className={location.pathname === "/" &amp;&amp; "active"}&gt;
                &lt;Link className="link" to="/"&gt;
                  &lt;i className="fa fa-cubes icon"&gt;&lt;/i&gt;
                  Dashboard
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li className={location.pathname === "/analytics" &amp;&amp; "active"}&gt;
                &lt;Link className="link" to="/analytics"&gt;
                  &lt;i className="fa fa-pie-chart icon"&gt;&lt;/i&gt;
                  Analytics
                &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li className={location.pathname === "/todo" &amp;&amp; "active"}&gt;
                &lt;Link className="link" to="/todo"&gt;
                  &lt;i className="fa fa-medkit icon"&gt;&lt;/i&gt;
                  What to do?
                &lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default SideNav;
  </code></pre>
  
  <p>Routing is working perfectly.</p>
  
  <p>My routing app/component code as follows:</p>
  
  <pre><code>import React from "react";
  import {
    BrowserRouter as Router,
    Route,
    Switch,
    Redirect
  } from "react-router-dom";
  import TopNav from "./components/Navbar/TopNav";
  import SideNav from "./components/Navbar/SideNav";
  import Dashboard from "./components/Dashboard";
  import Analytics from "./components/Analytics";
  import ToDo from "./components/ToDo";
  
  class App extends React.Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;SideNav /&gt;
          &lt;TopNav /&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/"&gt;
              &lt;Dashboard /&gt;
            &lt;/Route&gt;
            &lt;Route exact path="/analytics"&gt;
              &lt;Analytics /&gt;
            &lt;/Route&gt;
            &lt;Route exact path="/todo"&gt;
              &lt;ToDo /&gt;
            &lt;/Route&gt;
            &lt;Redirect to="/"&gt;&lt;/Redirect&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  <p>Thanks!!</p>