I'm toggling navigation in next.js, it works fine, it's just I want the navigation to close again when the route changes.
For example, if I'm on the home page and toggle the navigation, the navigation opens and shows a link to the about page. If I click that link, I get taken to the about page as expected - but the navigation is still open!
I've tried a few things - I think I want to utilize onRouteChangeComplete(url) but I'm struggling to update the navActive state.
My page.js file:
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>
);
}
}
Then my header file:
class Header extends React.Component {
render() {
return (
<HeaderSide
<HeaderToggleBar onClick={() => this.props.toggle()} />
</HeaderSide>
);
}
}
So the app starts off with navActive state of false, clicking the HeaderToggleBar element opens and closes the nav. But I need to close the nav when the route changes. I guess I could put the click event on the navigation items within the header (so clicking to a new page toggles) but that seems a bit over the top.
Thank you.
Have a look at https://github.com/zeit/next.js/#router-events . You should be fine with sth like this in the ctor of your Header component:
constructor(props){
super(props);
Router.events.on('routeChangeComplete', (url) => {
props.toggle();
});
}
if you're using a functional React component, you can do this:
const router = useRouter();
useEffect(() => {
if (isMenuOpen) {
setMenuOpen(!isMenuOpen);
}
}, [router.asPath]);
when route changing is happening, next.js is trying to load the other page. A better way to handle the route change, if you are tracking the loading state, keep that loading state true, until the route change is complete.
const router = useRouter();
useEffect(() => {
const handleComplete = () => {
setIsLoading(false);
};
router.events.on("routeChangeComplete", handleComplete);
router.events.on("routeChangeError", handleComplete);
return () => {
router.events.off("routeChangeComplete", handleComplete);
router.events.off("routeChangeError", handleComplete);
};
}, [router]);
We can use router events to handle this. Refer: 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]);
Reference: https://nextjs.org/docs/api-reference/next/router
There you can see class component base code. But here I use the functional components to solve this issue.
useEffect(() => {
const handleRouteChange = () => {
setOpenDropdown(false)
}
router.events.on('routeChangeStart', handleRouteChange)
}, [])
I believe you need to bind your callback. You might also need to add a constructor. Here's an snippet from a project that accepts file uploads.
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>
)
}
}
Use this awesome library which handles routing with redux in nextjs:
Complete example<\/strong>
import { useRouter } from 'next/router';
const Menu = () => {
const router = useRouter();
const [show, setShow] = useState(false);
const hide = useCallback(() => {
setShow(false);
}, [setShow]);
useEffect(() => {
// subscribe
router.events.on('routeChangeStart', hide);
// unsubscribe
return () => router.events.off('routeChangeStart', hide);
}, [hide, router.events]);
return show ? <div>menu</div> : null
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.