NextJs Parallel Routes Modal Conundrum: Why it Won’t Dismiss on Redirect and How to Fix it

Are you tired of dealing with modals that just won’t disappear when redirecting to another page in your NextJs application? You’re not alone! The NextJs parallel routes modal issue has been a thorn in the side of many developers, causing frustration and confusion. But fear not, dear reader, for today we’ll dive into the heart of the problem and emerge victorious with a solution.

What are NextJs Parallel Routes?

Before we tackle the modal issue, let’s quickly recap what NextJs parallel routes are. In a nutshell, parallel routes allow you to define multiple routes that can be rendered simultaneously, enabling features like server-side rendering (SSR) and static site generation (SSG). This powerful feature enables developers to create fast, scalable, and SEO-friendly applications.

The Problem: Modals Not Dismissing on Redirect

Now, let’s get to the meat of the matter. When using parallel routes in your NextJs application, you might encounter an issue where modals fail to dismiss when redirecting to another page. This can lead to a poor user experience, as the modal remains stuck on the screen, obstructing the view of the new page.

The reasons behind this issue are rooted in how NextJs handles parallel routes and modals. When you create a modal, it’s typically rendered as a separate component, which is not automatically cleaned up when you navigate away from the page. This is because modals are not part of the page’s component tree, making them exempt from the automatic cleanup process that occurs when you redirect to another page.

The Solution: A Step-by-Step Guide

Fear not, dear reader, for we’ve got a solution that’ll make your modals behave as expected! Follow these steps to ensure that your modals dismiss properly when redirecting to another page:

1. Use a State Management Library

   
// Install Redux
npm install redux react-redux

   // Create a Redux store
   import { createStore, combineReducers } from 'redux';
   import { Provider } from 'react-redux';

   const store = createStore(combineReducers({ /* your reducers */ }));

   // Wrap your App with the Provider





2. Create a Modal Reducer

   Create a Redux reducer specifically designed to manage your modals. This reducer will handle the open and close states of your modals.

   
// modalReducer.js
export const initialState = {
isOpen: false
};

   export const modalReducer = (state = initialState, action) => {
switch (action.type) {
case 'OPEN_MODAL':
return { ...state, isOpen: true };
case 'CLOSE_MODAL':
return { ...state, isOpen: false };
default:
return state;
}
};


3. Connect your Modal Component to Redux

   Connect your modal component to Redux using the connect function from React Redux. This will allow your modal to receive updates from the Redux store.

   
// Modal.js
import React from 'react';
import { connect } from 'react-redux';

   const Modal = ({ isOpen, closeModal }) => {
   if (!isOpen) return null;

   return (

   
   Close

   );
   };

   const mapStateToProps = state => ({
   isOpen: state.modal.isOpen
   });

   const mapDispatchToProps = dispatch => ({
   closeModal: () => dispatch({ type: 'CLOSE_MODAL' })
   });

   export default connect(mapStateToProps, mapDispatchToProps)(Modal);


4. Use the useEffect Hook to Clean Up

   Use the useEffect hook to clean up your modal when the component unmounts. This will ensure that the modal is properly closed when you redirect to another page.

   
// pages/_app.js
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { closeModal } from '../redux/actions';

   export default function App({ Component, pageProps }) {
   const dispatch = useDispatch();

   useEffect(() => {
   return () => {
   dispatch(closeModal());
   };
   }, []);

   return ;
}


5. Dispatch the CLOSE_MODAL Action on Redirect

   Finally, dispatch the CLOSE_MODAL action when redirecting to another page. This will update the Redux store and close the modal.

   
// pages/index.js
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import { closeModal } from '../redux/actions';

   export default function IndexPage() {
   const router = useRouter();
   const dispatch = useDispatch();

   const handleRedirect = () => {
   dispatch(closeModal());
   router.push('/another-page');
   };

   return (

   
   Redirect to another page

   );
}


Conclusion

There you have it, folks! By following these steps, you should now be able to create modals that properly dismiss when redirecting to another page in your NextJs application. Remember to use a state management library like Redux, create a modal reducer, connect your modal component to Redux, use the useEffect hook to clean up, and dispatch the CLOSE_MODAL action on redirect.

With this solution, you’ll be able to provide a seamless user experience, free from stuck modals. Happy coding!

<Note>: Make sure to adapt this solution to your specific use case and adjust the code according to your needs.
</Note>

Frequently Asked Question

Get answers to the most pressing questions about Next.js Parallel Routes Modal not being dismissed when redirecting to another page!