Delete模态框是否被React-Router劫持？功能迁移遇阻咨询

Hey there! Let's work through your modal problem together—sounds like two main issues are at play here: Materialize not initializing the modal properly, and React-Router hijacking your modal clicks. Here's how to fix both:

1. Make Sure Materialize Modal is Properly Initialized in React #

The fact that you can manually show the modal by toggling display:none means the modal markup is there, but Materialize hasn't hooked into it yet. In React, you need to initialize Materialize components after the component mounts because the DOM isn't ready until then.

If you're using a functional component, use the useEffect hook with a ref to target the modal:

import { useEffect, useRef } from 'react';

function YourComponent() {
  const modalRef = useRef(null);
  const handleDelete = () => {
    // Your delete logic here
    // Close the modal after deletion
    M.Modal.getInstance(modalRef.current).close();
  };

  useEffect(() => {
    // Initialize the modal when the component mounts
    const modalInstance = M.Modal.init(modalRef.current);
    
    // Clean up the modal instance when the component unmounts
    return () => modalInstance.destroy();
  }, []);

  return (
    <div>
      {/* Trigger button for the modal */}
      <button className="btn modal-trigger" data-target="delete-modal">Delete</button>

      {/* The modal itself */}
      <div id="delete-modal" className="modal" ref={modalRef}>
        <div className="modal-content">
          <h4>Confirm Deletion</h4>
          <p>Are you sure you want to delete this item? This action can't be undone.</p>
        </div>
        <div className="modal-footer">
          <button className="modal-close waves-effect waves-green btn-flat">Cancel</button>
          <button className="waves-effect waves-red btn-flat" onClick={handleDelete}>Confirm Delete</button>
        </div>
      </div>
    </div>
  );
}

2. Stop React-Router from Hijacking Modal Clicks #

The address bar changing when you click the modal is a dead giveaway that React-Router is interpreting your modal links as route navigations. Here's how to fix this:

• Use <button> instead of <a>: Materialize styles work just as well on buttons, and buttons don't trigger the default navigation behavior that React-Router picks up. This is the cleanest solution.
• If you must use <a>: Add onClick={(e) => e.preventDefault()} to each <a> tag in the modal to stop the default link behavior:

  <a href="#!" className="modal-close waves-effect waves-green btn-flat" onClick={(e) => e.preventDefault()}>Cancel</a>
  

3. Should You Modify React-Router to Match /modal2? #

Short answer: No. Your modal isn't a separate route—it's a UI element that overlays your current page. Changing your router setup to accommodate it would add unnecessary complexity and go against how modals are designed to work. Fixing the initialization and click behavior is the right approach here.

Give these steps a try, and your delete confirmation modal should work as expected—no manual CSS tweaks or route changes needed!

内容的提问来源于stack exchange，提问作者TurtleWolfe