React-router v4 history.push, div против кнопки - PullRequest
Новая
       33

React-router v4 history.push, div против кнопки

1 голос
/ 24 июня 2019

У меня есть такой реактивный компонент 

import * as React from 'react';
...
export class MyComponent extends React.Component {
    onCreate = () => {
        this.props.actions.create();
    }

    render() {
        return (
            <div>
                <button onClick={this.onCreate}>Button</button>
                <div onClick={this.onCreate}>Div</div>
            </div>
        );
    }
}

this.onCreate передается в OtherComponent, который передает функцию еще несколько раз в другой компонент реагирования, где она в конечном итоге вызывается при нажатии на div.

Мой создатель действий выглядит так: 

import {history} from '../../../index.tsx';
...
create: () => dispatch => {
    dispatch(new ActionOne());
    dispatch(new ActionTwo());
    history.push('/someurl');
    debugger;
    dispatch(new ActionThree());
}
...

История такова: 

import { Provider } from 'react-redux';
import { Route, Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
...
export const history = createBrowserHistory();

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={AppM} />
        </Router>
    </Provider>,
    document.getElementById('root')
);

Проблема в другом поведении, когда history.push происходит от кнопки против div.

С кнопки, когда нажата строка отладчика, веб-страница уже показывает /someurl, но из div, /someurl еще не отображается, но в конечном итоге появится через некоторое время после завершения ActionThree.

Я могу получить последовательное поведение, если оберну history.push('/someurl'); или dispatch(new ActionThree()); в setTimeout, но я бы хотел понять, что здесь происходит. Что может быть причиной различий в поведении?

...