How to make path param to be optional in react router dom(v4)?

Question

This is my code which I don't think is right and redundant:

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

I think exact={true} is redundant since I can simply do path="/(:filter)" in previous react router versions? I don't wanna use history.push :(

This is how I usd my NavLink in my Footer Component:

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

and my FilterLink:

const FilterLink = ({ filter, children }) => (
  <NavLink 
    to={ filter === 'all' ? '' : filter }
    activeStyle={{
      textDecoration: 'none',
      color: 'red'
    }}
  >
  {children}
  </NavLink>
);

The path is changing, example: localhost:3000/active but the style has no effect, but it affects the all? when I am on localhost:3000/?

Answer 1

In react-router v4 you can defined an optional path parameter like

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

Path parameter must be defined in a manner which is as per the npm package path-to-regexp understands as mentioned in the react-router docs