Function 当我的函数提交时，我试图通过react-router dom重定向，但我一直收到这个错误

我希望在提交表单时更改我的路线，但我遇到了一个错误，我还试图防止默认。请让我知道我做错了什么。我在谷歌上搜索了几个小时。我想重定向到/searchProducts

×
TypeError: Cannot read property 'props' of undefined
(anonymous function)
C:/Users/Test/Documents/GitHub/Ecommerce-Store/src/components/searchBar.js:10
   7 |  const { search } = productConsumer;
   8 | 
   9 |  useEffect(() => {
> 10 |    console.log(this.props.history);
     | ^  11 |  });
  12 | 
  13 |  const onChange = e => {

import React，{useContext，useffect，useRef}来自“React”；
从“../../src/context”导入{ProductContext}；
const ProductFilter=props=>{
const productConsumer=useContext（ProductContext）；
const text=useRef（“”）；
const{search}=productConsumer；
useffect（（）=>{
console.log（this.props.history）；
});
const onChange=e=>{
如果（text.current.value！=''）{
搜索（如目标值）；
}否则{
}
};
const onSubmit=e=>{
//e.预防违约（）；
//this.props.history.push（'/path'）；
};
返回(
);
};
导出默认产品过滤器；

要使用

历史

对象，您需要一个HOC

用HOC包装组件，您就可以访问

历史

对象

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

const ProductFilter = props => {
   ...
   useEffect(() => {
     console.log(props.history);   //Don't use this
   });

   const onSubmit = e => {
     // e.preventDefault();
     props.history.push('/path');  //Now you can access history object.
   };
   ...
}

export default withRouter(ProductFilter);

---

注意：在功能组件中，我们无权访问此

 您正在加载时直接调用函数
您不需要这样做，

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

const ProductFilter = props => {
   ...
   useEffect(() => {
     console.log(props.history);   //Don't use this
   });

   const onSubmit = e => {
     // e.preventDefault();
     props.history.push('/path');  //Now you can access history object.
   };
   ...
}

export default withRouter(ProductFilter);