未捕获的类型错误：无法读取未定义的属性(读取"历史记录")

Question

我使用react router dom版本6.3.0。我得到未捕获的类型错误：无法读取未定义的属性(读取"历史记录"(错误。。在那之后，我尝试了很多方法也得到了同样的错误，请帮帮我。。。。这是Search.js文件，我在搜索特定项目时出错，而且url没有改变，它保持原样。

import React, { useState, Fragment } from "react";
import MetaData from "../layout/MetaData";
import "./Search.css";
const Search = ({ history }) => {
  const [keyword, setKeyword] = useState("");
  const searchSubmitHandler = (e) => {
    e.preventDefault();
    if (keyword.trim()) {
      
  
   
 history.push(`/products/${keyword}`);
    } else {
      history.push("/products");
    }
  };
  return (
    <Fragment>
      <form className="searchBox" onSubmit={searchSubmitHandler}>
        <input
          type="text"
          placeholder="Search a Product ..."
          onChange={(e) => setKeyword(e.target.value)}
        />
        <input type="submit" value="Search" />
      </form>
    </Fragment>
  );
};
export default Search;

和

app.js文件

import "./App.css";
import { useEffect} from "react";
import { BrowserRouter as Router,Route,Routes} from "react-router-dom";
import Header  from "./component/layout/Header/Header";
import WebFont from "webfontloader";
import React from "react";
import Footer from "./component/layout/Footer/Footer.js"
import Home from "./component/Home/Home.js"
import ProductDetails from "./component/Product/ProductDetails.js"
import Products from './component/Product/Products.js'
import Search from './component/Product/Search.js'
function App() {
  useEffect(() => {
    WebFont.load({
      google: {
        families: ["Roboto", "Droid Sans", "Chilanka"],
      },
    });

  }, []);
  window.addEventListener("contextmenu", (e) => e.preventDefault());
  return (
    <Router>
      <Header/>
        <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/product/:id' element={<ProductDetails/>} />
          <Route path='/products' element={<Products/>} />
          <Route path='/search' element={<Search/>} />
        </Routes>
      <Footer/>
    </Router>
  );
}
export default App;

谢谢。

Answer 1

我建议使用react路由器dom v6的useNavigate挂钩。

const navigate = useNavigate();
...
navigate(`/products/${keyword}`);
    } else {
      navigate("/products");
    }
};
...