Почему я не могу разделить <Switch> на другой модуль?

Цель

Я пытаюсь извлечь <Switch> с выходом <Route> в другой модуль.

Проблема

URL-адрес изменяется на новый путь, а содержимое - нет (только когда я обновляю его, изменяется).

Я пытаюсь понять, что мне не хватает.

ИЗМЕНИТЬ:живой пример:https://stackblitz.com/edit/separated-switch-module

рабочий пример:

<BrowserRouter>
  <div>
    <Link to = "/"> Home </Link>
    <Link to = "contacts"> Contacts </Link>

    <Switch>
      <Route exact path = "/" component = {Home} />
      <Route path = "/contacts" component = {Contacts} />
    </Switch>
  </div>
</BrowserRouter>

неудачный пример:

<BrowserRouter>
  <div>
    <Link to = "/"> Home </Link>
    <Link to = "contacts"> Contacts </Link>
    <SwitchedRoutes/>
  </div>
</BrowserRouter>

ИЗМЕНИТЬ:

SwitchedRoutes:

import React from "react";
import { observer, inject } from "mobx-react";
import { Switch, Route } from "react-router-dom";

@inject('pageStore')
@observer
export default class extends React.Component {
    render(){   
        const {
            home,
            contacts
        } = this.props.pageStore.pages;

        return (
            <Switch>
                <Route exact path = {home.path} render = {()=> <Home />} />
                <Route path = {contacts.path} render = {()=> <Contacts/>} />
            </Switch>
        )
    }
}