How do I handle forms in React Router?

How do I handle forms in React Router?

You can handle forms in React Router by using the useHistory hook to manage navigation and form submission.

Can you show me an example of a form component?

Sure! Here's a simple example:

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

const MyForm = () => {
  const [input, setInput] = useState('');
  const history = useHistory();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic here
    history.push('/success');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      <button type="submit">Submit</button>
    </form>
  );
};

This component captures user input and navigates to a success page upon submission.

What if I want to validate the form before submission?

You can add validation logic in the handleSubmit function. For example, check if the input is empty before proceeding.

Can I use libraries like Formik with React Router?

Absolutely! Formik works well with React Router. You can integrate it to manage form state and validation easily.