Реактивный переключатель маршрутов не переключается / перерисовывается при изменении URL / маршрута - PullRequest
Новая
       10

Реактивный переключатель маршрутов не переключается / перерисовывается при изменении URL / маршрута

0 голосов
/ 17 декабря 2018

Я использую mobx-реагирующий маршрутизатор для обработки маршрутизации внутри магазина.Магазин обеспечен основным компонентам верхним компонентом.Основной компонент прост в отображении любого из двух элементов div на основе текущего URL.

Однако я заметил, что коммутатор не обновляется при динамическом изменении URL-адреса (изменяя хранилище routingStore).Я замечаю, что URL обновится (в адресной строке), и обновление страницы будет работать.

Компонент очень простой: 

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 должно вызывать обновление представления.- Если этого не происходит, как я могу сделать так, чтобы это произошло?

...