React Router - OnClick не обрабатывает в Navlink

Question

Внизу, в теге NavLink, onClick не работает, я только перенаправляюсь на другую страницу, но она не обрабатывает функцию submitHandler

Если я удаляю NavLink, то submitHandler обрабатывает, но всякий раз, когда я добавляю тэг React Router, ничего не срабатывает

Я удаляю большую часть кода, потому что в моем вопросе не было необходимости

class XXX extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
      users: [],
      errors: []
    };
  }

  submitHandler = event => {
    event.preventDefault();

    let check = true;

    if (this.state.username == "") {
      this.showValidationErr("username", "Username cannot be empty !");
      check = false;
    }
    if (this.state.password == "") {
      this.showValidationErr("password", "Password cannot be empty !");
      check = false;
    }
    if (this.state.users.indexOf(this.state.username) != -1) {
      this.showValidationErr("username", "Username already exists !");
      check = false;
    }
    if (check) {
      axios
        .post("https://localhost:44314/api/Users", this.state)
        .then(response => {
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    }
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.submitHandler}>
          <button type="Submit">
            <NavLink to="/newsfeed" onClick={() => this.submitHandler}>
              Create Account
            </NavLink>
          </button>
        </form>
      </div>
    );
  }
}

Answer 1

Вам не нужен NavLink здесь, просто используйте кнопку, и щелчок вызовет функцию, используемую в форме.

<form onSubmit={this.submitHandler}> <button type="Submit" />Create Account</button> </form>

Если вы хотите перенаправить, вы можете сделать это в submitHandler function.

submitHandler = (event) => {
event.preventDefault();
// Your logic
this.props.history.push("newsfeed");

Подставка history будет доступна, когда вы оберните свой компонент с помощью HOF.

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

export default withRouter(YourComponent);