代码之家 › 专栏 › 技术社区 › Alex Johnson Michal M

如何在路线更改时关闭导航菜单

react-router reactjs

Alex Johnson Michal M · 技术社区 · 7 年前

具有 react-router-dom

我目前正在使用 "react-router-dom": "^4.2.2" "react": "^15.6.1" . 当用户选择了一个新的目标URL时,我想关闭我的移动导航菜单,但我在检测路线何时改变时遇到了问题。

反应路由器dom location.onChange(() => { this.state.collapsed = true; })

我目前的代码如下:

组件:

class Leftnav extends Component {

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

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

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

<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>

截图:

3 回复 | 直到 7 年前

d_shiv 3 年前

这对于OP来说已经晚了4年,然而,我最终在这里寻找了一个解决确切问题的方法(尽管是使用更新版本的 react 和 react-router-dom )所以在这里添加我的解决方案,供其他人解决这个问题。

useLocation (来自 )和 useEffect 反应

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

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

简短的解释: 在上述组件中,我们从 pathname 从那里开始。路径名的值将在用户导航时更新。这个钩子还负责在任何时候重新渲染组件(由于钩子内的状态更新)。之后我们需要做的就是创建一个useEffect挂钩,当路径名更改时关闭菜单。

此模式可用于基于客户端导航在组件中执行任何操作。

Jake Haller-Roby 7 年前

<NavLink to={`/events`} 
         activeClassName="current"
         onClick={this.toggleMenu}
    >Events</NavLink>

toggleMenu 函数来防止默认的单击操作,现在应用了单击处理程序。

toggleMenu = (e) => {
    if (e) {
        e.preventDefault();
    }
    this.setState({collapsed: !this.state.collapsed});
}

Pedram Neo M Hacker 2 年前

functional component 和 nextjs 遵循以下步骤:

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>