How do I implement redirection in React Router v6?

How do I implement redirection in React Router v6?

In React Router v6, you can use the <Navigate> component for redirection. You can specify the to prop to indicate the path you want to redirect to.

Can you show me a code example?

Sure! Here's a simple example:

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

function MyComponent() {
  const shouldRedirect = true; // Your condition here

  return (
    <div>
      {shouldRedirect ? <Navigate to='/new-path' /> : <p>Stay on this page</p>}
    </div>
  );
}

What if I want to redirect after a form submission?

You can handle the form submission and then use the <Navigate> component to redirect. For example:

const handleSubmit = () => {
  // handle form submission logic
  setRedirect(true);
};

return (
  <form onSubmit={handleSubmit}>
    {/* form fields */}
    <button type='submit'>Submit</button>
    {redirect && <Navigate to='/success' />}
  </form>
);