React-Modal navigates on close

Question

Using React, React-Router and React-Modal.

Provided I have these routes:

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); 

I am opening a modal inside of the UnitPlants component

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>
        );
    }

My open and close look like this:

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

Yet when I close my modal, it navigates to http://localhost:3000/UnitPlants?plantName=&productType=1&createdAt=2016-06-02&expiresAt= for some reason and I cannot seem to figure out why exactly.

How can I stop my modal from navigating to a route having ?..... and thus not re-rendering my entire application?

Answer 1

I forgot to handle the default behaviour of the button in the modal.

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

the e.preventDefault() fixed the issue