onSubmit form send data to another component/route in React

Question

I am currently having a react component, where I have a small form:

const firstName = React.useRef(null);
const handleSubmit = e => {
    const data = {
        firstName: firstName.current.value,
        lastName: lastName.current.value,
        ...
    }
}
<form onSubmit={handleSubmit}>
    <input type="text" ref={firstName} name="firstName" required placeholder="enter_first_name" />
    <input type="text" ref={lastName} name="lastName" required placeholder="enter_last_name" />
...
    <Button>Submit</Button>
</form>

This form is not mandatory and I want to pass the final data value to the next component, where I want to utilise the formData passed on. I have recently created this form and previously the Button was just a static router to the component.

<Link to="/component"><Button>Submit</Button></Link>

Now that I am handling the formData, I would like to pass it to the next component. I have tried props way of usage, but did not understand how to pass. Help is appreciated here.

Answer 1

Using react-router you can pass the data in the url, using the useParams hook.

For that first you need to create the route that accepts parameters, like:

 <Route path="/:firstName/:secondName" children={<Child />} />

And then in the Child component have the hook to get the id, like:

  let { firstName, secondName } = useParams();