在路由更改Next.js上更改状态

Question

嗨，我在next.js中切换导航，它工作得很好，只是我想在路线改变时再次关闭导航。

例如，如果我在主页上切换导航，导航会打开并显示一个指向about页面的链接。如果我点击这个链接，我会被带到about页面--但是导航仍然是打开的！

我已经尝试了一些东西-我想我想使用onRouteChangeComplete( navActive )，但我正在努力更新url状态。

我的page.js文件：

class Page extends Component {
  state = {
    navActive: false
  };

  toggle = () => {
    this.setState({
      navActive: !this.state.navActive
     });
  };

  render() {
    return (
      <ThemeProvider theme={theme}>
        <StyledPage className="full-page-wrapper">
          <Meta />
          <Header navActive={this.state.navActive} toggle={this.toggle} />
          <PrimaryContent>{this.props.children}</PrimaryContent>
          <GlobalStyle />
        </StyledPage>
      </ThemeProvider>
    );
  }
}

然后是我的头文件：

class Header extends React.Component {
  render() {
    return (
      <HeaderSide

        <HeaderToggleBar onClick={() => this.props.toggle()} />

      </HeaderSide>
    );
  }
}

因此，应用程序开始时的navActive状态为false，单击HeaderToggleBar元素将打开和关闭导航。但是当路线改变的时候我需要关闭导航。我想我可以把点击事件放在标题中的导航项上(所以点击到新页面会切换)，但这似乎有点过头了。

谢谢。

Answer 1

看看https://github.com/zeit/next.js/#router-events吧。您应该可以在Header组件的ctor中使用下面这样的内容：

constructor(props){
  super(props);

  Router.events.on('routeChangeComplete', (url) => {
    props.toggle();
  });
}

Answer 2

如果你正在使用一个功能强大的React组件，你可以这样做：

   const router = useRouter();

   useEffect(() => {
    if (isMenuOpen) {
      setMenuOpen(!isMenuOpen);
    }
  }, [router.asPath]);

Answer 3

我们可以使用路由器事件来处理此问题。参考：https://nextjs.org/docs/api-reference/next/router#usage-6

const router = useRouter();
useEffect(() => {
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange)
  };
}, [router.events]);