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

Question

Цель

Я пытаюсь извлечь <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>
        )
    }
}

Answer 1

Поскольку react-router v4 немного изменил API, вам необходимо предоставить все базовые компоненты, такие как Switch, Link и т. Д. Контекст маршрутизатора. (Что-то вроде подписчика на маршрутизацию), как только вы отключаете модуль от отдельного файла, он теряет контекст.

просто добавьте это к SwitchedRoutes.js

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

const Home = () => <h1>Home</h1>;
const Contacts = () => <h1>Contents</h1>;


const switchedRouter = inject('store')(observer(props => {
  const {home, contacts} = props.store.routes;

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

export default withRouter(switchedRouter)

мы просто обернули компонент withRouter HoC, который предоставляет нам правильный контекст реакции-маршрутизатора.

https://separated -switch-module-j92psu.stackblitz.io