In a previous article, we discussed how to use three very commonly used Hooks from the React Router library, a routing library specifically designed for use in React applications. We discussed the useNavigate(), useParams(), and useLocation() Hooks. These Hooks allow developers to programmatically navigate within a functional component, access URL parameters, and access the current location object that represents the current URL respectively.
In this article, we’ll take a look at some less commonly used, but still very powerful Hooks, from React Router. In particular, the Hooks we’ll discuss today are new and have been released as part of the latest major version of React Router(v6). React Router v6 is a significant update that introduces a new API for programmatic navigation, improved support for server-side rendering, and new features for managing routes and URLs.
We’ll be discussing the following Hooks:
useSubmit()
useBeforeUnload()
useRouteError()
It’s important to note that in v6.4 of React Router, new routers were introduced to support the new data APIs available to us like loaders, actions, and fetchers. The Hooks discussed in this article are designed to be used in conjunction with one of the new data routers from React Router. If you’re following along or want to try one of the Hooks discussed in this article, be sure to use a data router, like the recommended createBrowserRouter() for Web applications, over a traditional router.
useSubmit()
The useSubmit() Hook allows us to programmatically submit a form instead of having the user trigger the form submit action themselves.
Here is an example of how the useSubmit() Hook can be used to handle a form submission.
In this example, when the form is submitted, the Hook's submit() function is invoked which submits the form data. Instead of relying on the traditional <form> submit action that occurs, we’re programmatically triggering the form submission with the help of the useSubmit() Hook.
Programmatic form navigation can be helpful in situations when we want to:
Trigger a form submit from a separate action(e.g. user clicks a button not placed within a form) or event(a certain period of time elapses).
Handle form validation programmatically before a form is submitted.
Conditionally navigate the user under certain conditions(e.g. if a user is not logged in, we redirect them to the login page before submitting the form).
useBeforeUnload()
The useBeforeUnload() Hook is a wrapper around the native browser window.unload event. The Hook allows us to run functionality just before the document is about to be unloaded. The unload event typically occurs when a user navigates from one page to another page.
Let’s use the same form example we’ve used when discussing the useSubmit() Hook above. This time, we’ll use the useBeforeUnload() Hook function to fire a console.log message just before the page is unloaded(i.e. just before the user is navigated away after the form submit).
useSubmit()
import { useSubmit } from 'react-router-dom';
const App = () => { const submit = useSubmit();
return ( <form onSubmit={(event) => { submit(event.currentTarget); }} > <input name="email" type="email" placeholder="Email" /> <input name="password" type="password" placeholder="Password" /> <button type="submit">Sign Up</button> </form> );};useBeforeUnload()
import { useCallback } from 'react';