react-router-dom Link on click close bootstrap modal window

Question

I need to close the modal window by clicking on the link. My modal window:

export const ModalWrapper = (props) => {
  const { children, title, modalName } = props;
  return (
    <div
      className="modal fade"
      id={`modal-${modalName}`}
      tabIndex="-1"
      role="dialog"
      aria-labelledby="modal-label"
      aria-hidden="true"
      style={{ display: 'none' }}
    >
      <div className="modal-dialog modal">
        <div className="modal-content" style={{ overflow: 'hidden' }}>
          <div className="modal-header">
            { title }
            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>

          </div>
          <div className="modal-body" style={{ maxHeight: '435', overflowY: 'auto' }}>
            <ul className="list-unstyled todo-list">
              {children}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

How can I close window with react-router-dom Link?

It close window without redirect:

<Link to="/registration" data-dismiss="modal" className="btn btn-default">Registration</Link>

It redirects but the window does not close:

<Link to="/registration" className="btn btn-default">Registration</Link>

Thank you!

score 2 · Accepted Answer · answered Mar 27 '18 at 14:53

To achieve your goal you can either:

Use a 3rd party library (e.g. React-Bootstrap);
Stick to the native code;

You can read more about React Bootstrap library at their website.

If you want to avoid extra dependencies, you can use React's ref functionality: https://reactjs.org/docs/refs-and-the-dom.html and use it to manipulate the dom (e.g. hide the dialog on Link click or any other action). In this case simply attach ref callback function to the dialog dom element:

<div className="modal" ref={(input) => {this.input = input}}>
...

In this case you can access dom's className and remove the show class from it. Be aware that you will also have to remove show from the fade container (dimmed background generated by Bootstrap).

My overall suggestion is to use utility function that will hide current modal and fade. Smth like:

const hideActiveModal = () => {
  const modal = document.getElementsByClassName('modal show')[0];
  const fade = document.getElementsByClassName('modal-backdrop show')[0];
  modal.className = modal.className.replace('show', '');
  fade.className = fade.className.replace('show', '');
};

Conclusion: you can't hide Bootstrap using clear React at moment. Either use React-Bootstrap or use util function (like the one I have provided).

This works almost perfect :)) - you have to remove class "model-open" from body tag. This class disable scrolling on longer pages. So add this: const body = document.getElementsByTagName("body")[0]; body.classList.remove("modal-open"); Then it works 100% and thank you for your initial post! :) — Pavel, Jul 17 '19 at 05:20

react-router-dom Link on click close bootstrap modal window

1 Answers1