我正在尝试将<Switch>
及其<Route>
提取到另一个模块。
网址被更改为新路径,但内容不会(只有当我刷新它更改时)。
我正在努力了解我错过了什么。
编辑: 直播示例: 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>
)
}
}
答案 0 :(得分:3)
由于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包装组件,它为我们提供了正确的反应路由器上下文。