Question

目标

我正在尝试将<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>

编辑：

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

为什么我不能将<switch>分开到另一个模块？

目标

问题

SwitchedRoutes：

1 个答案: