How to create optional parameter on path and activestyle in react router v4/react-router-dom?

Question

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:

<BrowserRouter>
    <Route path="/:filter?" component={App}/>
</BrowserRouter>

This code is on my footer component that uses FilterLink which only uses NavLink:

const Footer = () => (
  <p>
    Show:
    {" "}
    <FilterLink filter="all"> 
      All 
    </FilterLink>
    {", "}
    <FilterLink filter="active">
      Active
    </FilterLink>
    {", "}
    <FilterLink filter="completed">
      Completed
    </FilterLink>
  </p>
);

It's working but the style only affects the root component or localhost:3000/ (the root)

 <NavLink 
    to={ filter === 'all' ? '' : filter }
    activeStyle={{
      textDecoration: 'none',
      color: 'black'
    }}
  >
  {children}
  </NavLink>

Answer 1

Simply, you could add ( exact ) to the NavLink as the following :

 <NavLink 
    exact
    to={ filter === 'all' ? '' : filter }
    activeStyle={{
      textDecoration: 'none',
      color: 'black'
    }}
  >
  {children}
  </NavLink>

Answer 2

You could just specify another route with no filter param:

<BrowserRouter>
    <Route exact={true} path="/" component={App}/>
    <Route path="/:filter" component={App}/>
</BrowserRouter>