Example of using react-router query utils

example-of-react-router-query-utils.jsx

import Modal from 'react-modal';
import { addQuery, removeQuery } from './utils-router.js';

const OPEN_MODAL_QUERY = 'openModal';

function SomeComponent({ location }) {
    return <div>
        <button onClick={ () => addQuery({ OPEN_MODAL_QUERY : 1 })}>Open modal</button>
        <Modal
            isOpen={ location.query[OPEN_MODAL_QUERY] }
            onRequestClose={ () => removeQuery(OPEN_MODAL_QUERY) }>
            <h1>Modal Content</h1>
        </Modal>
    </div>;
}

// inject "location" property from react-router
// to correct server-side rendering of opened modal
export default withRouter(SomeComponent);