導航到 React 中的另一個頁面時如何關閉模式

Question

我正在使用 react-router-dom/material UI 模式，並且我想在用戶導航到另一個頁面時隱藏我的模式。

這是我的App組件，

const App = () => (
  <BrowserRouter>
    <ModalHandlersProvider>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
        </Route>
      </Routes>
    </ModalHandlersProvider>
  </BrowserRouter>
);

export default App;

我在ModalHandlersProvider組件中渲染CustomModal ，使用上下文 API 傳遞與模式相關的函數。

const ModalHandlersContext = React.createContext(initialState);
export const useModalHandlersContext = () => useContext(ModalHandlersContext);

const ModalHandlersProvider = ({ children }) => {
  const [modal, setModal] = useState(initialState);
  const handlers = {
    openModal: setModal,
    closeModal: () => setModal(initialState),
  };

  return (
    <ModalHandlersContext.Provider value={handlers}>
      {children}
      <CustomModal
        open={modal.open}
        onClose={handlers.closeModal}
        content={modal.content}
      ></CustomModal>
    </ModalHandlersContext.Provider>
  );
};

export default ModalHandlersProvider;

所以基本上子組件可以使用ModalHandlersContext中的處理程序打開/關閉模式。

我知道我可以在用戶單擊的元素上附加一個模式關閉函數（ handlers.closeModal ），但它效率低下，也無法應對用戶按下后退按鈕。

我發現我可以使用 next.js 中的useRoute()來解決它，但我現在不想嘗試它，因為我對 React 還很陌生。

有什么解決辦法嗎？

Answer 1

在您的提供程序中添加 useEffect 掛鈎並檢查路由是否已更改。 還要在 ref 中添加關閉操作，以防止不必要的 useEffect 調用。

useEffect(() => {
        if (currentRout !== perRoute) {
         setModal(initialState)
        }
    }, [route])