React-Modal 在关闭时导航

Question

使用 React、React-Router 和 React-Modal。

假设我有这些路线：

ReactDOM.render((
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={ App }>
                    <IndexRoute component={ Home } />
                    <Route path="/UnitPlants" component={ UnitPlants } />
                    <Redirect from="*" to="/" />
                </Route>
            </Router>
        </Provider>
    ), main);

我正在 UnitPlants 组件内部打开一个模式

render: function () {
        return (
                <div>
                    <div className="row col-xs-12 padding-bottom-10">
                        <button className="pull-right btn btn-success"
                            onClick={this.openModal}>
                            <span className="glyphicon glyphicon-plus" aria-hidden="true"></span> Open my modal
                        </button>
                    </div>
                    <div className="row col-xs-12">
                        //some table here... nothing important
                        <Modal
                            isOpen={this.state.modalIsOpen}
                            shouldCloseOnOverlayClick={false}
                            style={modalStyle}>
                            <UnitPlantDialog closeModal={this.closeModal}  unitPlant={this.state.unitPlant}/>
                        </Modal>
                    </div>
                </div>
        );
    }

我的打开和关闭看起来像这样：

openModal: function () {
    this.setState({ modalIsOpen: true });
},
closeModal: function () {
    this.setState({ modalIsOpen: false });
}

然而，当我关闭我的模式时，它出于某种原因导航到 http://localhost:3000/UnitPlants?plantName=&productType=1&createdAt=2016-06-02&expiresAt=，我似乎无法弄清楚为什么。

如何阻止我的模式导航到具有 ?..... 的路线，从而不重新呈现我的整个应用程序？

Answer 1

我忘记处理模式中按钮的默认行为。

closeModal: function (e) {
        e.preventDefault();
        this.props.closeModal();
    }

e.preventDefault() 解决了问题

React-Modal 在关闭时导航

React-Modal navigates on close

reactjs

react-router

react-modal