React-Router Route is creating a null ref from unmounted functional component - reactjs

Question

Someone with React-Router experience can probably answer this. I have an application with a landing page, a dropdown menu on that landing page and a "sign up" button that <Link>'s to a simple page with a login form.
The dropdown menu is using the react ref system to put a ref on the dropdown menu. There is a click event listener that references this ref so that the state of the dropdown is not toggled when anything inside that ref is clicked. And there is a cleanup function for that click event listener so that when the menu is closed, the event listener is no longer present.
What is happening is that if the dropdown menu is open, and you click on the <Link> to the login page, it is creating a null ref on the dropdown menu from the click event listener, even though I'm trying to completely unmount these components and mount another one with react-router.
It's not clear to me whether I should be converting this LandingMenu component to class component so that I can use componentDidUnmount to trigger the cleanup function, or whether I am using react router incorrectly, or if there is another "correct" method to solve this problem that i'm not aware of. Here is the code.
App.js
import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import "../styles/index.css";
import Landing from "./landing/Landing";
import Login from "./login/Login";
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Route path="/" exact component={Landing} />
<Route path="/login" exact component={Login} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
Login Button
import React from "react";
import { Link } from "react-router-dom";
import Button from "../common/Button";
import ChevronRight from "../icons/ChevronRight";
const LandingAuthentication = () => {
return (
<div className="login-buttons-wrapper">
<Link to="/login">
<Button Text="Sign in" Style="button-primary" Icon={<ChevronRight />} />
</Link>
</div>
);
};
export default LandingAuthentication;
Landing Menu
import React, { useState, useEffect, useRef } from "react";
import "../../styles/landing-menu.css";
const LandingMenu = ({ Title, Icon, children }) => {
// visibility toggle, default closed
const [open, setOpen] = useState(false);
// set menu ref to prevent double click event
const menuRef = useRef();
// close menu if clicked anywhere outside of menu
// on initial render, add click event listener
useEffect(() => {
const onBodyClick = (event) => {
// check if element clicked is inside of menu
// if so no action is required from this event listener so exit
if (menuRef.current.contains(event.target)) {
return;
}
// else close the menu
setOpen(false);
};
// add event listener and cleanup only if menu is open
if (open === true) {
document.body.addEventListener("click", onBodyClick);
// CLEANUP
// remove event listener
return () => {
document.body.removeEventListener("click", onBodyClick);
};
}
}, [open]);
// on click toggle state
return (
<nav className="landing-menu" ref={menuRef}>
<div
className="landing-menu-title-wrapper"
onClick={() => {
setOpen(!open);
}}
>
<h3 className="landing-menu-title">{Title}</h3>
<div className="landing-menu-title-icon">{Icon}</div>
</div>
<ul className={`dropdown ${open ? "visible" : "hidden"}`}>{children}</ul>
</nav>
);
};
export default LandingMenu;

Answer 1

The error ended up being caused by an update to the way React handles references in React 17. The solution is to update the if statement from:
if (menuRef.current.contains(event.target)) {
to
if (menuRef.current && menuRef.current.contains(event.target)) {