How to Close Navigation Menu on Route Change

user_1508105 0
Viewed 5733

With react-router-dom, how can I detect when the user navigates to a new page?

I'm currently using "react-router-dom": "^4.2.2" and "react": "^15.6.1". I want to close my mobile navigation menu when the user has selected a new target URL, but I'm having trouble detecting when the route has changed.

Is there a callback I can hook into for react-router-dom? I would like to be able to call code along the lines of location.onChange(() => { this.state.collapsed = true; })

My current code is as follows:

Component:

class Leftnav extends Component {

 constructor() {
    super();
    this.state = {
      collapsed: true,
    };
  }

  toggleMenu = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    })
  };

  render() { ... { */html here/* } ... };
};

Template:

<ul className={"leftnav-collapse " + (this.state.collapsed ? 'collapsed' : '')}>
    <li><NavLink to={`/events`} activeClassName="current">Events</NavLink></li>
    <li><NavLink to={`/people`} activeClassName="current">People</NavLink></li>
</ul>

Screenshot:

enter image description here

react-router reactjs
3 Answers

This comes 4 years too late for the OP, however, I ended up here looking for a solution to the exact problem (albeit with newer versions of react and react-router-dom) so adding my solution here for others solving this problem.

When using functional components (which would be the recommended approach today), we can create a solution using useLocation (from react-router-dom) and useEffect (from react) hooks. A component like the following would close the menu on navigation.

function LeftNav() {
  const [isOpen, setOpen] = useState(false);
  const {pathname} = useLocation();

  useEffect(() => {
    setOpen(false); // Close the navigation panel
  }, [ pathname ]);
  
  return ( /* your jsx */ );
}

A short explanation: In the above component, we obtain the location object from useLocation hook and extract current pathname from there. The value of pathname is going to be updated on user navigation. The useLocation hook also takes care of re-rendering your component (due to state update within hook) whenever that happens. All we need to do after that is create an useEffect hook that closes the menu when pathname changes.

This pattern can be used to take any action in a component based on client side navigation.

user_20113720

If anyone looking for a solution for functional component and nextjs follow this:

import { useRouter } from 'next/router';
const [MobileMenu, setMobileMenu] = useState(false);
const { pathname } = useRouter();

useEffect(() => {
        setMobileMenu(false); // close menu if path changes!
    }, [ pathname ]);

<div onClick={()=>setMobileMenu(!MobileMenu)}>
     <i className="las la-bars"></i>
</div>

That's it!

user_45401830
Related