Question

我正在使用mobx-react-router来处理商店内部的路由。顶部组件将存储提供给主要组件。主要组件很简单，可以根据当前网址显示两个div之一。

但是，我注意到当url动态更改（通过修改routingStore）时，该开关没有更新。我确实注意到该网址将更新（在地址栏中），并且刷新页面将起作用。

该组件非常基本：

const Main2 = inject('routingStore')(observer(
class extends Component {
    render() {
        return <div>
            <Switch>
                <Route path={`/test1`} exact
                       render={(myProps) => {
                           return <div style={{height: '50%', backgroundColor:'blue'}}>first</div>
                       }}/>
                })}
                <Route path={`/test2`} exact
                      render={(myProps) => {
                          return <div style={{height: '50%', backgroundColor: 'red'}}>second</div>
                      }}/>
                })}
            </Switch>
            <Button onClick={() => {
                const store = this.props.routingStore;
                store.push('/test1')
            }}>first</Button>
            <Button onClick={() => {
                const store = this.props.routingStore;
                store.push('/test1')
            }}>second</Button>

        </div>
    }
}));

const styled = withStyles(styles)(Main2);
export default withWidth()(styled);

哪个呈现者：

import React, { Component } from 'react';
import './App.css';
import { Router } from 'react-router';
import {Provider} from 'mobx-react';
import RootStore from './stores';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.state.rootstore = new RootStore(new FetcherLocal({timeout: 100, failRate: 0}));
    }

    render() {
        const {rootstore} = this.state;
        return (
            <Provider {...rootstore}>
                <Router history={rootstore.history}>
                    <div className="App">
                        <Main
                            contentMap={contentMap}
                        />
                    </div>
                </Router>
            </Provider>
        );
    }
}

和RootStore.js：

import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import createBrowserHistory from 'history/createBrowserHistory';

import {AuthStore} from "./AuthStore";
import {OrganizationStore} from "./OrganizationStore";
import {EventStore} from "./EventStore";
import {FetcherUrl} from "../Fetchers/FetcherUrl";
import {EntryStore} from "./EntryStore";
import {GeneralErrorStore} from "./GeneralErrorStore";

export default class RootStore {
    constructor(conn=undefined) {
        this.routingStore = new RouterStore();
    }
}

据我了解，这应该可行：更改url会触发视图更新。 -如果没有发生，我该如何做呢？

url / route更改时，react routeswitch不切换/呈现

0 个答案: