Mastering Modals in React with React Router
Unlock the Power of Dynamic URLs and Seamless Navigation
Modals are more than just a stylish way to display information on top of another view. They require careful implementation, especially when it comes to dynamic URLs, page refreshes, and mobile scrolling interactions. In this article, we’ll explore the art of building a modal module for React with React Router, covering the essential aspects of modals and providing solutions to common challenges.
What is React Router?
Before diving into modal components, let’s start with the basics of React Router. This popular routing library for React allows you to build single-page applications with multiple views or pages, similar to traditional multi-page apps. With over 50,000 stars on GitHub, React Router has a massive community and is considered the go-to tool for building complex React apps.
Pros and Cons of React Router
React Router offers several advantages, including accelerated page-to-page navigation, support for various routing strategies, and a large, active community. However, it also has some drawbacks, such as a steep learning curve, initial load times, and potential scalability issues.
Getting Started with Basic Routing
To begin, install react-router-dom using npm and wrap your app with the <BrowserRouter/> component. Then, specify routes to render specific views when matched. We’ll create a navigation menu that will be visible at the top of the application, using <Link/> or <NavLink/> components for navigation purposes.
What are Modals?
Modals are windows that appear on top of the screen, often used for important information or user input. They have visual priority over all other elements and can be used to require an immediate response from the user, notify users of urgent information, or confirm user decisions.
Creating a Modal Component
To create a modal component, we’ll use the useNavigate React Router Hook to access the router history and call the navigate('/') method to change the application URL and redirect to the homepage when the modal is closed. We’ll also use onClick={e => e.stopPropagation()} to prevent the propagation of the click event and trigger the onClick on .modal-wrapper, which would close the modal when the actual .modal element is activated.
Styling the Modal Wrapper
Styling the .modal-wrapper is crucial to make it span the whole screen and appear above the content. We’ll use -webkit-overflow-scrolling: touch to enable elastic scroll on iOS devices.
Opening the Modal View
To open the modal view, we’ll render the modal component on top of the existing view when a specific URL is matched. We’ll use a state variable to detect if a modal is active or not and pass it along with a <Link/> component.
Matching the Modal Location
To display the modal as an overlay, we’ll define a <Route/> outside of <Routes/> with extra conditions. We’ll store the previous location object and pass it to <Routes/> instead of letting it use the current location object by default.
Preventing Scroll Underneath the Modal
To prevent the content below from scrolling underneath the modal, we’ll use overflow: hidden on the body. However, this method fails on mobile Safari, so we’ll use the body-scroll-lock package to remedy this issue. We’ll import disableBodyScroll and enableBodyScroll functions and call them when the modal component is mounted and unmounted, respectively.
Get Started with LogRocket
LogRocket is a powerful tool for modern React error tracking. Get set up in minutes and start improving your digital experiences today! Visit https://logrocket.com/signup/ to get an app ID and install LogRocket via npm or script tag.