嗨,我要在next.js中切换导航,它工作正常,只是我希望当路线更改时,导航再次关闭。
例如,如果我在主页上并切换导航,导航将打开并显示指向“关于”页面的链接。如果单击该链接,将按预期进入“关于”页面-但导航仍处于打开状态!
我已经尝试了几件事-我想我想利用 onRouteChangeComplete(url),但我正在努力更新navActive状态。
我的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元素将打开并关闭导航。但是,当路线改变时,我需要关闭导航。我想我可以将click事件放在标题内的导航项上(以便单击切换到新页面),但这似乎在顶部有点过头。
谢谢。
答案 0 :(得分:5)
如果你使用的是函数式 React 组件,你可以这样做:
const router = useRouter();
useEffect(() => {
if (isMenuOpen) {
setMenuOpen(!isMenuOpen);
}
}, [router.asPath]);
答案 1 :(得分:2)
看看https://github.com/zeit/next.js/#router-events。在Header组件的ctor中,您应该可以这样:
constructor(props){
super(props);
Router.events.on('routeChangeComplete', (url) => {
props.toggle();
});
}
答案 2 :(得分:0)
我相信您需要绑定您的回调。您可能还需要添加一个构造函数。这是一个接受文件上传的项目的片段。
class Files extends React.Component {
// define your constructor and call super before setting state vars
constructor(props){
super(props);
this.state = {
uploadStatus: false
}
// Bind your callback
this.handleUploadImage = this.handleUploadImage.bind(this);
// set other initial vars if needed
}
handleUploadImage(files){
// do stuff with the files
}
render () {
return (
<div id="fileContainer">
<MyDropzone id={this.props.project._id} onDrop={this.handleUploadImage}>
{({getRootProps}) => <div {...getRootProps()} />}
</MyDropzone>
</div>
)
}
}
答案 3 :(得分:0)
使用这个很棒的库,它在 nextjs 中使用 redux 处理路由:
答案 4 :(得分:0)
我们可以使用路由器事件来处理这个。参考: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]);