Question

未捕获的类型错误：无法读取 history.go(-1) 未定义的属性“go”

2021-07-05

239

javascript reactjs

我的页面上有一些过滤器。单击“返回”后，我想逐个返回到已过滤的页面。

比如我在页面上，上面有 3 个过滤器。我应用了过滤器 1，然后应用了过滤器 2。单击“返回”后，我应该转到过滤器 1 页面，然后是主页。但是它不起作用。单击“返回”后，它显示
未捕获的类型错误：无法读取未定义的属性“go”

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

const backBtn = ({ href }) => {
  const history = useHistory();

  function handleClick() {
    if (href) {
      history.push(href);
    } else {
      history.go(-1);
    }
  }

  return(
    <button onClick={handleClick}> Back
    </button>

  );
};

Answer 1

我在这里看到两个问题：-

组件名称应以大写字母开头，如 BackBtn 。
仅当 BackBtn 是从 react-router-dom 导入的 Router 组件的子组件时， useHistory 钩子才会返回有效的 history 对象（可以是 BrowserRouter 、 HashRouter 等）。目前 history 为 undefined ，这意味着 BackBtn 不是 Router 组件的子项。

这是一个可以工作的沙盒：-

Answer 2

Uncaught TypeError: Cannot read property 'go' of undefined for history.go(-1)

表示 history 未定义。尝试在 app.js 中使用 useHistory 函数并将 history 添加为 prop。