title: How to create optional parameter on path and activestyle in react router v4/react-router-dom?
body: <p>I want to pass an optional parameter on my route, this is my code that does not work from the root component,, the filter is optional, i tried /(:filter) it doesnt work:</p>
  
  <pre><code>&lt;BrowserRouter&gt;
      &lt;Route path="/:filter?" component={App}/&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>This code is on my footer component that uses FilterLink which only uses NavLink: </p>
  
  <pre><code>const Footer = () =&gt; (
    &lt;p&gt;
      Show:
      {" "}
      &lt;FilterLink filter="all"&gt; 
        All 
      &lt;/FilterLink&gt;
      {", "}
      &lt;FilterLink filter="active"&gt;
        Active
      &lt;/FilterLink&gt;
      {", "}
      &lt;FilterLink filter="completed"&gt;
        Completed
      &lt;/FilterLink&gt;
    &lt;/p&gt;
  );
  </code></pre>
  
  <p>It's working but the style only affects the root component or localhost:3000/ (the root) </p>
  
  <pre><code> &lt;NavLink 
      to={ filter === 'all' ? '' : filter }
      activeStyle={{
        textDecoration: 'none',
        color: 'black'
      }}
    &gt;
    {children}
    &lt;/NavLink&gt;
  </code></pre>