我正在使用 React-Bootstrap。 e.preventDefault() 不起作用

Question

I'm trying to put a simple Search Box in my navbar. I'm using React-Bootstrap, with python and django. So, I want to prevent default form behaivor: e.preventDefault();

The problem is: it is not working. If I hit enter on the form or if I click the button, the page refreshes and the console.log("hello there I am working") doesn't show. Why?

Code:

import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
import { useHistory } from "react-router-dom";

function SearchBox() {
    const [keyword, setKeyword] = useState("");

    let history = useHistory();

    const submitHandler = (e) => {
        e.preventDefault();
        console.log("hello there I am working");
        if (keyword) {
            history.push(`/?keyword=${keyword}&page=1`);
        } else {
            history.push(history.push(history.location.pathname));
        }
    };
    return (
        <div>
            <Form onSubmit={submitHandler}>
                <Form.Control
                    type="text"
                    name="keyword"
                    onChange={(e) => setKeyword(e.target.value)}
                    className="mr-sm-2 ml-sm-5"
                ></Form.Control>

                <Button type="submit" variant="outline-success" className="p-2">
                    Submit
                </Button>
            </Form>
        </div>
    );
}

export default SearchBox;

Answer 1

Maybe the refresh is because of history. I tried running your code by commenting out the history commands in a sandbox and it is working fine.

import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
// import { useHistory } from "react-router-dom";

function SearchBox() {
  const [keyword, setKeyword] = useState("");

  // let history = useHistory();

  const submitHandler = (e) => {
    e.preventDefault();
    console.log("hello there I am working");
    // if (keyword) {
    //   history.push(`/?keyword=${keyword}&page=1`);
    // } else {
    //   history.push(`/?keyword=${keyword}&page=1`);
    // }
  };
  return (
    <div>
      <Form onSubmit={submitHandler}>
        <Form.Control
          type="text"
          name="keyword"
          onChange={(e) => setKeyword(e.target.value)}
          className="mr-sm-2 ml-sm-5"
        ></Form.Control>

        <Button type="submit" variant="outline-success" className="p-2">
          Submit
        </Button>
      </Form>
    </div>
  );
}

export default SearchBox;