Redirect on form submit using React Router


Borislav Hadzhiev

Last updated: May 1, 2022


Check out my new book

Redirect on form submit using React Router #

To redirect on form submit using React Router:

  1. Use the useNavigate() hook, e.g. const navigate = useNavigate();.
  2. Call the navigate() function passing it the path - navigate('/contacts').
  3. The navigate() function lets us navigate programmatically.
import {Link, Routes, Route, useNavigate} from 'react-router-dom'; function Home() { const navigate = useNavigate(); const handleSubmit = event => { event.preventDefault(); // 👇️ redirect to /contacts navigate('/contacts'); }; return ( <form onSubmit={handleSubmit}> <input /> <button type="submit">Submit</button> </form> ); } export default function App() { return ( <div> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/contacts">Contacts</Link> </li> </ul> </nav> <Routes> <Route path="/contacts" element={<Contacts />} /> <Route path="/" element={<Home />} /> </Routes> </div> </div> ); } function Contacts() { return <h2>Contacts</h2>; }

react redirect on form submit

The useNavigate hook returns a function that lets us navigate programmatically, e.g. after a form is submitted or a button is clicked.

The navigate function can be passed a delta, e.g. -1 to go one page back, 1 to go one page forward or a path, e.g. navigate('/about').

The function also takes an options object.

const handleSubmit = event => { event.preventDefault(); // 👇️ redirect navigate('/contacts', {replace: true}); };

When the replace property is set to true on the options object, the current entry in the history stack gets replaced with the new one.

In other words, navigating to the new route won't push a new entry into the history stack, so if the user clicks the back button, they won't be able to navigate to the previous page.

This is useful, for example, when a user logs in - you don't want them to be able to click the back button and get back to the login page.

Or if you have a route that redirects uses to a different page - you don't want users to click the back button and get redirected again.

To use the useNavigate hook in your application, make sure the App component in your index.js file is wrapped in a Router.

import {createRoot} from 'react-dom/client'; import App from './App'; import {BrowserRouter as Router} from 'react-router-dom'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // 👇️ wrap App in Router root.render( <Router> <App /> </Router> );
The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the react router package anywhere in your components.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.