React Router Linking using

I am using React Router. I want when the user clicks on the button, it directs them to the page (endpoint) /form which has the UserForm component.

Here is my code wrapping the button:

          <Router>
          <Link to="/form" className="updateLink">
              <button className="updateBtn" onClick={() => {
                  this.update(id);
                  console.log(`Item Number: ${id} Was Updated Successfully`);
                        window.alert(`Item Number: ${id} Was Updated Successfully`);
                    }}>U</button>
          </Link>
          <Switch>
             <Router exact path="/form" component={UserForm} />
          </Switch>
          </Router>

Answer

We use useHistory when working with functional components. If we are using class components we pass history through props. ie.

      const history = this.props.history;
      history.push('/form');

in the button example, here is how it should be done in class components:

       <button className="updateBtn" onClick={() => {
              const history = this.props.history;
              history.push('/form');
              this.update(id);
              window.alert(`Item Number: ${id} Was Updated Successfully`);
                }}>U</button>