reactjs - ReactJS TypeError：无法读取未定义的属性“推送”

Question

我构建我的应用程序并学习 ReactJS

直到现在我的代码错误，我尝试在互联网和论坛上搜索但无法修复。这是我的代码：

logout(){
    localStorage.removeItem("token");
    localStorage.clear();
    if(localStorage.getItem('token') === null){
        this.props.history.push('/login')
    }
}

错误：TypeError：无法读取未定义的属性“推送”

请帮我

Answer 1

我的猜测是你logout在一个组件中，它不是它自己的路由。我的意思是你没有做<Route path="/" component={ComponentThatHasLogoutMethod} />

只有用作 Route 的组件才有historyprop。如果您需要其他一些嵌套组件中的那些，您可以使用withRouter来自的高阶组件react-router-dom

export default withRouter(ComponentThatHasLogoutMethod)

这会将历史道具传递给您的组件，并且您不会得到空值。

Answer 2

带有反应钩子的解决方案示例：

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    localStorage.removeItem("token")
    localStorage.clear()
    if(!localStorage.getItem('token')){
      history.push("/login")
    }
  }

  return (
    <button type="button" onClick={handleClick}>
      Login
    </button>
  );
}

您可以在文档 https://reacttraining.com/react-router/web/api/Hooks/usehistory中找到更多信息

Answer 3

在创建自定义门户以显示注销/登录等模型时，我遇到了类似的问题。

const App = () => {
  const [modal] = useSelector(({ modal }) => [modal])
  return (
    <>
      <Portal modal={modal} />  
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </>
  );
}

export default App;

正确的方式 - Portal 必须是 BrowserRouter 的孩子。

const App = () => {
      const [modal] = useSelector(({ modal }) => [modal])
      return (
        <>
          <BrowserRouter>
            <Portal modal={modal} />  
            <Routes />
          </BrowserRouter>
        </>
      );
   }

有关更多参考，请参阅路由器。

Answer 4

对于这个问题，我们有两种解决方案-：

• 用粗箭头符号声明替换函数声明，即 -：

  logout = () => {
        localStorage.removeItem("token");
        localStorage.clear();
        if(localStorage.getItem('token') === null){
            this.props.history.push('/login');
        }
    }

• 我们可以logout在构造函数中绑定函数——：

  constructor(props){
      super(props);
      this.logout = this.logout.bind(this);
  }