useNavigate is a React Router hook that returns a function for changing the URL programmatically. Calling that function prompts the router to render the UI associated with the new path, making it useful for actions such as a Next button or group selector. section 10.1.4
Use useNavigate when navigation follows an event rather than a permanently rendered link:
- Use event handlers for controls such as a group selector or Next button; use Link when rendering direct navigation links. section 10.1.4
Advance to the next bookable
const navigate = useNavigate(); function nextBookable () { const i = bookablesInGroup.indexOf(bookable); const nextIndex = (i + 1) % bookablesInGroup.length; navigate(getUrl(bookablesInGroup[nextIndex].id)); } Here, the URL becomes the selected state: navigating to /bookables/1 or /bookables/2 causes the matching route and view to render.
