Naveera A.
—When using React Router you get access to the Link
component, which allows you to navigate within a single-page application without reloading the app.
But how can you implement programmatic or imperative navigation?
Let’s say you have a form. When the user clicks on the submit button, you want to submit the form and then navigate the user to another page.
You can’t substitute the submit button with the Link
component because you want the button to submit the form first.
How can you implement this behavior using React Router?
React Router ships with a hook to let you trigger navigation programmatically.
The hook is different depending on which version of React Router you are using.
In React Router v6, you can use the useNavigate
hook. It returns a function that lets you navigate programmatically.
import { useNavigate } from "react-router-dom"; function App() { const navigate = useNavigate(); function handleClick() { // Handle form submission behaviour. // Then trigger navigation. navigate("/home"); } return ( <div> <h2>Click this button</h2> <button onClick={handleClick}>Submit</button> </div> ); }
This function can take up to two arguments:
The first argument is required. You can think of it as the navigate-to link. It can be a route, as in the example above, or a number, like navigate(-2)
to go back two pages in browser history.
The second argument is optional. It lets you provide additional information.
For example, to prevent users from returning to the current page using the browser’s back button, you can use {replace: true}
as the second argument:
const navigate = useNavigate(); function handleClick() { navigate("/home", { replace: true }); }
If you need the state, you can do so by adding {state: state}
as the second argument:
const navigate = useNavigate(); function handleClick() { navigate("/home", { state: state }); }
You can read more about this hook in the official documentation.
If you are using React Router v5, you can use the useHistory
hook. This hook gives you access to the history
object.
The history
object has many properties and methods that let you navigate programmatically.
For example:
import { useHistory } from "react-router-dom"; function App() { const history = useHistory(); function handleClick() { // Handle form submission behaviour. // Then trigger navigation. history.push("/home"); } return ( <div> <button onClick={handleClick}>go home</button> </div> ); }
You can read about other methods and properties in the official documentation.
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at compliance@sentry.io.
If you are a California resident, see our Supplemental notice.