How to use the react-router-dom.useHistory function in react-router-dom

const InstrumentBuildQuestionItems = (props) => {
  let history = useHistory();

  const dispatch = useDispatch()
  const classes = useStyles();
  const questionItemId = get(props, "match.params.questionItemId", null);

  const instrumentId = get(props, "match.params.instrument_id", "")
  const questionItems = useSelector(state => get(state.questionItems, instrumentId, {}));
  const selectedQuestion = get(questionItems, questionItemId, {used_by: []})

  useEffect(() => {
    dispatch(QuestionItems.all(instrumentId));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);

  const QuestionItem = (props) => {
    const {label, value, id} = props

const QuestionImporter = () => {
  const { quizId } = useParams();
  const history = useHistory();

  const [questionIds, setQuestionIds] = useState([]);
  const [isSaving, setIsSaving] = useState(false);

  const { loading, error, data } = useQuery(QUIZ_QUERY, { variables: { id: quizId } });
  const [importQuestionsMutation] = useMutation(IMPORT_QUESTIONS);

  const importQuestions = async () => {
    setIsSaving(true);
    try {
      // Send the mutation
      const result = await importQuestionsMutation({
        variables: { quizId, questionIds },
      });
      // Handle errors
      if (result.errors && result.errors.length > 0) {

export default function HomescreenPasswordInput(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  let history = useHistory();

  function handleSubmit(event) {
    event.preventDefault();
  }

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  function handleDirectToPath() {
    history.push("/News");
  }

  return (
    
      <form></form>

function OrganizationEdit({ organization }) {
  const detailsUrl = `/organizations/${organization.id}/details`;
  const history = useHistory();
  const [formError, setFormError] = useState(null);

  const handleSubmit = async (
    values,
    groupsToAssociate,
    groupsToDisassociate
  ) => {
    try {
      await OrganizationsAPI.update(organization.id, values);
      await Promise.all(
        groupsToAssociate.map(id =>
          OrganizationsAPI.associateInstanceGroup(organization.id, id)
        )
      );
      await Promise.all(
        groupsToDisassociate.map(id =>

};

    useKeybinding(Key.RIGHT, () => nav(1));
    useKeybinding(Key.LEFT, () => nav(-1));
    useKeybinding(Key.ESCAPE, () => {
        reset();
        if (searchString && searchString !== '') {
            setSearchString('');
            return true;
        } else {
            return false;
        }
    });

    const rolloutNames = useRolloutNames(rollouts);
    const history = useHistory();

    useKeybinding(Key.SLASH, () => {
        if (!searchString) {
            if (searchInput.inputref.current) {
                searchInput.inputref.current.focus();
            }
            return true;
        }
        return false;
    });

    useKeybinding(Key.ENTER, () => {
        if (pos > -1) {
            history.push(`/rollout/${filteredRollouts[pos].objectMeta?.name}`);
            return true;
        }

function LDAPAuth() {
  const { t } = useTranslation();
  const { loginInProgress, login } = useAuth();
  const history = useHistory();

  const [username, setUsername] = useState({
    value: '',
    isValid: false,
  });
  const [password, setPassword] = useState({
    value: '',
    isValid: false,
  });

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();

    if (username.isValid && password.isValid) {
      login({ username: username.value, password: password.value }).then(() => {
        history.push('/home');

export default function AdminNavbar() {
  const { appContext } = useContext(AppContext);
  const history = useHistory();
  const [menuIsVisible, showMenu] = useClickOutside();

  const handleLogout = () => {
    AuthenticationService.clearAuthenticationInfo();

    history.push("/");
  };

  return (
    <nav>
      <h1>
        
      </h1>
      <div>
        <div>
          <button color="primary"> history.push("/assets/add")} size="xs"&gt;</button></div></div></nav>

const ReviewModal: React.FC = () => {
  /**
   * If there is no background (usually when user navigates directly
   * to a review) then by default, show it on the landing page by
   * adding the state manually to set background page to landing.
   */
  const location = useLocation();
  const history = useHistory();
  useEffect(() => {
    const noBackgroundPageSet = !(location.state && location.state.background);
    if (noBackgroundPageSet) {
      const defaultBackgroundPage = {
        pathname: RouteName.LANDING,
      };
      const newLocation = {
        ...location,
        state: {
          background: defaultBackgroundPage,
        },
      };

      history.replace(defaultBackgroundPage);
      history.push(newLocation);
    }

const SignIn = () => {
  const [isValid, setValid] = useState(true);
  let history = useHistory();
  const onSubmit = values => {
    api.post("login", values).then(function(response) {
      if (response && !("error" in response.data)) {
        login(response.data.data.access_token);
        history.push("/");
      } else {
        setValid(false);
      }
    });
  };

  const validationSchema = Yup.object().shape({
    username: Yup.string().required("Username é obrigatório!"),
    password: Yup.string()
      .min(6, "Senha deve ter no mínimo 6 caracteres")
      .required("Senha é obrigatória!")