Javascript 为什么我不能分开<；开关>；到另一个模块？ 目标

我试图将

及其

提取到另一个模块

问题 url正在更改为新路径，但内容没有更改（仅当我刷新它时才会更改）

我在努力理解我错过了什么

编辑： 现场示例：

工作示例：

家
联络

失败的exmaple:

家
联络

编辑：

交换机路由：

从“React”导入React；
从“mobx react”导入{observer，inject}；
从“react router dom”导入{Switch，Route}；
@注入（'pageStore'）
@观察者
导出默认类扩展React.Component{
render（）{
常数{
家，
联络
}=this.props.pageStore.pages；
返回(
} />
} />
)
}
}

由于

react router

v4稍微更改了一个API，您需要为所有底层组件（如

交换机

，

链接

等）提供路由器上下文。（类似于路由内容的订户），一旦您断开模块与单独文件的连接，它就会丢失上下文

只需将其添加到

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)

从“React”导入React；
从“react router”导入{withRouter}
从“react router dom”导入{Switch，Route}；
从“mobx react”导入{inject，observer}；
常量Home=（）=>Home；
const Contacts=（）=>内容；
const switchedRouter=inject（'store'）（观察者（props=>{
const{home，contacts}=props.store.routes；
返回(
);
}));
使用路由器导出默认值（SwitchedOuter）

我们简单地用

withRouter

HoC包装组件，它为我们提供了一个正确的react路由器上下文

---

你能展示一下SwitchedRoutes组件吗？嘿，我用SwitchedRoutes组件更新了帖子。你在

SwitchedRoutes

文件中导入了

Route

吗？是的，很抱歉，这里的代码片段中缺少了它，但我修复了它，你去吧，修复了你的问题。Dang，比我先到了。反正要修好。

<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>
        )
    }
}

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)