为什么我不能将 <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>

已编辑：

交换路由：

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 包装了组件，它为我们提供了正确的 react-router 上下文。

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

为什么我不能将 <Switch> 分开到不同的模块？

Why cant I separate <Switch> to a different module?

javascript

reactjs

mobx

mobx-react

react-router-dom

目标

问题

交换路由：