Ссылка «реакции-роутер-дом» не работает?

Это код в моем корневом компоненте:

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

Это код в компоненте Footer, который использует компонент FilterLink

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

Теперь это код в моем FilterLink, который использует Link from 'response-router-dom', который не работает

import { Link } from 'react-router-dom';

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

Я не могу найти ошибку, так как она не бросает никаких ошибок, но просто заставляет мое приложение ничего не отображать после того, как я применил этот код, который использует ссылку. Помогите?