title: React JS - How can I show / hide some parts of component based on URL path?
body: <p>I was wondering if I can change the navbar items <strong>based on URL</strong> without having 2 different navbar components. My navbar has 3 links on the left side and 3 links on the right but I want to display each side once a time. </p>
  
  <p>eg: when I'm on <code>/page-1, /page-2, /page-3</code> I want to show only the left side and when I'm on <code>/page-4, /page-5, /page-6</code> to show the right side. I tried something with <code>match.params</code> but no luck. How can I achieve that? Sorry for my english</p>
  
  <p><strong>Layout.js</strong></p>
  
  <pre><code>...
  
  export default class Layout extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Route path="/:name" component={Navbar} /&gt;
          &lt;SomeContentComponent /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Navbar.js</strong></p>
  
  <pre><code>const Navbar = ({ match }) =&gt; {
  
    const page = match.params.name
  
    return (
      &lt;div&gt;
        &lt;ul className="left"&gt;
          &lt;li&gt;&lt;Link to="/page-1"&gt;Page 1&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/page-2"&gt;Page 2&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/page-3"&gt;Page 3&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul className="right"&gt;
          &lt;li&gt;&lt;Link to="/page-4"&gt;Page 4&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/page-5"&gt;Page 5&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to="/page-6"&gt;Page 6&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>