CODEWITHSUNDEEP
javascriptreactjssingle-page-applicationreact-router-dom
Çetin
Çetin

Reputation: 117

Cannot use button and link at the same time in react

I'm working on a single page app with 4 different components. Each component should have submit button to save and send data inside the form.

However, when I use button to submit, it submits information but I also need to use react-router at the same time to switch between components.

The example below works for only submitting. I can pass data into state. In addition to sending, it must also redirect to the other component to continue flow.

<Form onClick={handleSubmit}>

  <button>submit</button>
</Form>

I've also tried wrapping button with link, now I can switch between components but I can't submit and data to next component.

<Form onClick={handleSubmit}>
 <Link to ='/component'>
  <button>submit<button>
 </Link>
</Form>

I need to find a way to use submit and react-router at the same time with single button.

Thanks in advance for any valuable advice.

Upvotes: 2

Views: 495

Answers (2)

i am davood
i am davood

Reputation: 175

you can use useHistory Hook in components

Upvotes: 1

Konstantin Samarin
Konstantin Samarin

Reputation: 867

The declarative routing should be used here. Redirect to another route in handleSubmit method utilizing useHistory hook and histoty.push(). Link: https://reactrouter.com/web/api/Hooks

Upvotes: 3

Related Questions