How do you handle redirection after form submissions or specific actions in React Router

Question

Can you tell me How do you handle redirection after form submissions or specific actions in React Router?

Answer 1

To handle redirection after form submissions or actions in React Router:

React Router v6+

Use the useNavigate hook:

import { useNavigate } from 'react-router-dom';

function MyForm() {

  const navigate = useNavigate();

  const handleSubmit = (e) => {

    e.preventDefault();

    // ...form logic

    navigate('/success'); // Redirect after action

  };

  return (

    <form onSubmit={handleSubmit}>

      {/* form fields */}

      <button type="submit">Submit</button>

    </form>

  );

}