Redirect on form submit using React Router

# 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.

Copied!
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>;
}

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.

Copied!
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.

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 users to a different page - you don't want users to click the back button and get redirected again.

I've also written an article on how to redirect to another page on button click.

# Wrap your application with a Router component

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

Copied!
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 your App in a Router
root.render(
  <Router>
    <App />
  </Router>
);

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Redirect to an Internal/External URL in React
• Set a Default route with redirect using React Router
• Get the current URL and Route in React and React Router
• How to remove query params using React router
• Get the ID from a URL in React and React Router
• How to Go back to the previous Page with React Router
• Handling 404 page not found in React Router
• Programmatically update query params in React router